在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

Your browser doesn't support HTML5. Maybe you should upgrade.

这是我的更多JavaScript

var v = document.getElementById("video")[0];

v.volume = .5;

v.pause();

video.onpause = video.onplay = function(e) {

playpause.value = video.paused ? 'Play' : 'Pause';

}

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

Your browser doesn't support HTML5. Maybe you should upgrade.

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

}

原文：https://stackoverflow.com/questions/14142366

更新时间：2020-02-19 23:27

最满意答案

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();

}

我已经添加了video变量的声明，因为这似乎引起了一些混乱。

在您的编辑中，您已经创建了一个v变量，但是您已经为其分配了与id为video的元素相关联的DOM对象的第一个属性或方法的值(这是数组访问者[0]在document.getElementById("video")之后所做的事情。 document.getElementById("video") )。 几乎可以肯定，该属性或方法本身不具有属性volume或方法pause() 。 之后，您开始使用video变量，而无需明确定义或设置其值。 它可能是在您未发布的代码中定义的，但是从您显示的内容中可能会浪费，因为您显然正在尝试使v变量成为视频元素的引用 - 不需要同时使用v和video 。

确定一个变量来保存对视频元素的引用，使用document.getElementById("video")分配它，然后一致地使用它。

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.

相关问答

您可以使用autoplay实现此目的：

Your browser does not support the video tag.

如果你想获得autoplay的参数，让我们说，用php，你可以使用： url： http://mydomain/vi

...

确保您的Web服务器能够使用字节范围提供文档。 谷歌浏览器要求这样做。 没有它，搜索将被禁用，并且设置currentTime将不起作用。 要测试您的Web服务器是否执行此操作，请使用以下命令： curl --dump-header - -r0-0 http://theurl

响应状态必须读取206 Partial Content ，您应该只接收资源的第一个字节，而不是整个资源。 -Phil Make sure your web server is capable of serving the d

...

你可以使用html5的媒体方法和事件 。 一旦幻灯片放映动画完成，我就使用play方法来开始play视频，并在视频播放结束后使用ended回调函数调用fancybox.next()函数。 这是您可以检查的工作版本： $(document).ready(function() {

$(".fancybox").fancybox({

afterShow: function() {

// After the show-slide-animation has ended - p

...

我的问题有2个答案： 视频文件的编码 - 基本上通过控制关键帧并将正确的视频发送到正确的浏览器，我能够解决许多问题。 使用FFMPEG我改变了GOP长度。 在我的情况下， ffmpeg -g ，其中是所需GOP点之间的帧数。 使用videojs提供视频似乎解决了很多问题，使其体验更加顺畅。 There were 2 answers to my question: Encoding of the video files - basically by controll

...

timeupdate事件发生在音频/视频播放位置改变时。 例。 视频正在播放时。 每当播放视频时，此函数message_one总是每次(秒)调用。 我会给你举例一步 currentTime = 1秒 调用message_one函数 message_one元素不包含类“message_hide” message_one元素添加类“message_hide” currentTime增加到2s 调用message_one函数 message_one元素现在包含“message_hide”类。 messa

...

从iOS 6.1开始，不再可以在iPad上自动播放视频。 我猜他们为什么禁用了自动播放功能？ 好吧，由于许多设备所有者在他们的设备上有数据使用/带宽限制，我认为Apple认为用户自己应该决定何时启动带宽使用。 经过一些研究后，我在Apple文档中发现了以下有关iOS设备自动播放的摘录，以确认我的假设： “Apple决定通过脚本和属性实现来禁用在iOS设备上自动播放视频。 在Safari中，在iOS(适用于所有设备，包括iPad)上，用户可能位于蜂窝网络上并按数据单元收费，因此禁用预加载和自动播放。

...

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.currentT

...

有多种方法可以保存这些东西： 本地(针对同一域) beforeunload 如果您愿意，这可以让您取消卸载事件。 但是，弹出窗口是可选的。 卸下 此事件无法取消，但您仍可以完全访问所有节点和JavaScript变量。 因此，如果不需要取消，您可以进行最终清理/保存。 您可以使用您喜欢的任何保存方法，例如document.cookie或window.localStorage 。 window.onunload = function () {

window.localstorage[myVid

...

即使我等到loadmetadata事件到达，但结果是缺乏对web.py的HTTP字节范围请求的支持，这阻止了搜索。 HTTP字节范围请求需要在HTML5视频中进行搜索，而事实证明web.py不支持它们，因此我使用Apache提供视频，并且它运行完美无瑕。 谢谢您的反馈！ Even though I was waiting until the loadedmetadata event was reached, it turned out to be the lack of support for H

...

作为HTTP Byte Serving的一部分，您对要求“Accept-Ranges”标头是正确的。 我建议阅读这个类似问题的答案： Seekbar无法在Chrome中运行 添加响应头是不够的。 您还必须使用“206 Partial Content”状态代码进行响应，并仅返回请求的字节范围。 听起来你还在归还整个文件。 fpassthru会将文件一直读回到最后，所以看起来你需要找到另一种方法来读取文件。 You are correct about requiring the "Accept-Ran

...