在html5视频中跳转到currentTime后自动播放 [英] autoplay after jump to currentTime in html5 video

问题描述

我正在尝试创建一个视频，在点击按钮后跳转到视频中的某个点后自动播放。我有它，以便视频跳到现场，但我无法弄清楚如何让它从那里自动播放。我是javascript的新手，我认为可能有一个我想念的简单解决方案。

  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）
} 
} 
  

这是我的一些html

 < div id =sideright> 
< input type =buttonid =fwdButtononclick =Fwd（）class =button_fwdrew/> 
< / div> 
 
< video id =videowidth =896height =504data-setup ={}> 
< source src =video / myAwesomeVideo.mp4type ='video / mp4; codecs =avc1.42E01E，mp4a.40.2'/> 
< source src =video / myAwesomeVideo.webmhd.webmtype ='video / webm; codecs =vp8，vorbis'> 
< source src =video / myAwesomeVideo.oggtheora.ogvtype ='video / ogg; codecs =theora，vorbis'/> 
< p>您的浏览器不支持HTML5。也许你应该升级。< / p> 
< / video> 
  

这是我的更多JavaScript

  var v = document.getElementById（video）[0]; 
 v.volume = .5; 
 v.pause（）; 
 video.onpause = video.onplay = function（e）{
 playpause.value = video.paused？ '播放'：'暂停'; 
} 
  

解决方案

不 video.play（） 有效吗？

  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（）; 
} 
  

我添加了视频的声明变量因为这似乎引起了一些混乱。

在你的编辑中你创建了一个 v 变量，但您已为其分配了与 id video <的元素关联的DOM对象的第一个属性或方法的值/ code>（这是数组访问者 [0] 在 document.getElementById（video））。几乎可以肯定，该属性或方法本身不具有属性 volume 或方法 pause（）。之后，您已开始使用视频变量，而无需明确定义或设置其值。它可能是在您未发布的代码中定义的，但是从您显示的内容中可以看出这将是一种浪费，因为您显然正在努力使 v 变量成为引用视频元素 - 不需要 v 和视频。

确定一个变量来保存对视频元素的引用，使用 document.getElementById（video）分配它，然后一致地使用它。 / p>

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';
        }

解决方案

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.

这篇关于在html5视频中跳转到currentTime后自动播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！