autoplay after jump to currentTime in html5 video

问题

I'm trying to create a video that autoplays from a point in the video after you jump to it after clicking a button. I have it so that the video jumps to the spot, but I cannot figure out how to get it to autoplay from there. I'm new to javascript and I think there might be a simple solution I'm missing.

    function Fwd(){
        if (video.currentTime < 17.91 && video.currentTime >= 0)
        { (video.currentTime = 17.92)
        }
        else if (video.currentTime < 35.93 && video.currentTime > 17.91)
        { (video.currentTime = 35.94)
        }
    }

Here is some of my html

<div id="sideright">
  <input type="button" id="fwdButton" onclick="Fwd()" class="button_fwdrew" />
</div>

<video id="video" width="896" height="504" data-setup="{}" >
<source src="video/myAwesomeVideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="video/myAwesomeVideo.webmhd.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="video/myAwesomeVideo.oggtheora.ogv" type='video/ogg; codecs="theora, vorbis"' />
<p>Your browser doesn't support HTML5. Maybe you should upgrade.</p>
</video>

Here is more of my JavaScript

var v = document.getElementById("video")[0];
    v.volume = .5;
    v.pause();
    video.onpause = video.onplay = function(e) {
    playpause.value = video.paused ? 'Play' : 'Pause';
        }

回答1:

Doesn't video.play() work?

function Fwd(){
    var video = document.getElementById("video");
    if (video.currentTime < 17.91 && video.currentTime >= 0)
    { 
        (video.currentTime = 17.92)
    }
    else if (video.currentTime < 35.93 && video.currentTime > 17.91)
    { 
        (video.currentTime = 35.94)
    }
    video.play();
}

I've added a declaration for the video variable since this seems to be causing some confusion.

In your edit you have created a v variable but you've assigned to it the value of the first property or method of the DOM object associated with the element with id of video (that's what the array accessor [0] does after document.getElementById("video")). Almost certainly that property or method won't itself have a property volume or a method pause(). After that you've started using a video variable without apparently defining it or setting its value. It may be defined in code you've not posted, but from what you've shown that would be a waste since you're apparently trying to make the v variable be the reference to the video element - there's no need for both v and video.

Decide on one variable to hold your reference to the video element, assign it using document.getElementById("video") and then use it consistently.

回答2:

var update = function() {
    if (document.getElementById("video").currentTime < 10) 
    {
        document.getElementById("video").currentTime = 10;
    }
};
document.getElementById("video").setAttribute("ontimeupdate", "update();");
document.getElementById("video").play();

来源：https://stackoverflow.com/questions/14142366/autoplay-after-jump-to-currenttime-in-html5-video

标签

javascript

html5

html5-video