Support » Fixing WordPress » Video playback at half speed

  • Resolved BobHatcher

    (@bobhatcher)


    I maintain a weather website that shows time lapse videos. Some of them play very fast and I want to offer the user a way to slow them down. On the URL below look down to the video after TEST. The script I am using is this. On the W3Schools website it works fine but on my site it doesn’t work.

    Although I am okay at WordPress, I am not a coder. Can someone please help?

    Thanks,
    Bob
    ===================================================================
    <button onclick=”setPlaySpeed()” type=”button”>Set video to be played in slow motion at half speed</button><br>

    <video id=”myVideo” width=”960″ height=”780″ controls>
    <source src=”http://www.bobhatcherweather.com/wp-content/uploads/iptimelapse/02oneaday.mp4&#8243; type=”video/mp4″ type=”video/mp4″>
    <source src=”http://www.bobhatcherweather.com/wp-content/uploads/iptimelapse/02oneaday.mp4&#8243; type=”video/mp4″ type=”video/ogg”>
    Your browser does not support HTML5 video.
    </video>

    <script>
    var vid = document.getElementById(“myVideo”);

    function getPlaySpeed() {
    alert(vid.defaultPlaybackRate);
    }

    function setPlaySpeed() {
    vid.defaultPlaybackRate = 0.5;
    vid.load();
    }
    </script>

    </body>

    • This topic was modified 6 years, 7 months ago by BobHatcher.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    1. Install this plugin: https://en-gb.wordpress.org/plugins/custom-css-js/
    2. Then go to the “Edit JS Code” part of the dashboard
    3. In the sidebar make sure the “Options” are set to:
      – External file
      – Footer
      – In Frontend
    4. In the main code field (the one withh <script…), add this code:

      
      var vid = document.getElementById(“myVideo”);
      
      function getPlaySpeed() {
      alert(vid.defaultPlaybackRate);
      }
      
      function setPlaySpeed() {
      vid.defaultPlaybackRate = 0.5;
      vid.load();
      }
      

    Then you’re only left with figuring out a safe way to add this HTML:

    
    <button onclick=”setPlaySpeed()” type=”button”>Set video to be played in slow motion at half speed</button><br>
    
    <video id=”myVideo” width=”960″ height=”780″ controls>
    <source src=”http://www.bobhatcherweather.com/wp-content/uploads/iptimelapse/02oneaday.mp4″ type=”video/mp4″ type=”video/mp4″>
    <source src=”http://www.bobhatcherweather.com/wp-content/uploads/iptimelapse/02oneaday.mp4″ type=”video/mp4″ type=”video/ogg”>
    Your browser does not support HTML5 video.
    </video>
    
    Thread Starter BobHatcher

    (@bobhatcher)

    Thanks, I set it up and called it SlowMotion, but is there a shortcode I need to put in the actual code for the page? I see nothing in the doc or support about how to get it in!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    It’s easier if you’re a developer but I’m trying to think of a way a plugin can help you out.

    I know if you put that code in the ‘Text’ editor & save, WordPress will strip some of the code out. So maybe the solution is to use a plugin that stops WordPress stripping the code in the Text editor.

    Maybe try this plugin: https://wordpress.org/plugins/dont-muck-my-markup/

    Thread Starter BobHatcher

    (@bobhatcher)

    Thanks, Andrew, I got it fixed. I couldn’t find out how to insert the shortcode with that plugin so I used another https://wordpress.org/plugins/simple-embed-code/

    This worked really well; BUT, rather than just the script code that Andrew suggested I had to use the whole code piece that I referenced above.

    Check it out at http://www.bobhatcherweather.com the fifth video down.

    The Simple Embed Code plugin adds a custom code section to your Edit Page. You give it a name and insert the code, e.g. SlowMotion and then in your page you just include %SimplePage% shortcode and all is well.

    I hope this helps someone else.

    • This reply was modified 6 years, 7 months ago by BobHatcher. Reason: Clarity
    • This reply was modified 6 years, 7 months ago by BobHatcher. Reason: More explanation of how to use the Simple Embed Code plugin
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Nice one 🙂

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Video playback at half speed’ is closed to new replies.