49

我有一个视频标签，当我让用户从数据库中的多个视频中进行选择时，我会动态更改其来源。问题是当我更改 src 属性时，即使我告诉它，视频也不会加载。

这是我的代码：

$("#video").attr('src', 'my_video_'+value+'.ogg');
$("#video").load();
while($("#video").readyState !== 4) {
        console.log("Video is not ready");
};

代码仍然处于无限循环中。

有什么帮助吗？

编辑：

致伊恩·德夫林：

//add an listener on loaded metadata
v.addEventListener('loadeddata', function() {
    console.log("Loaded the video's data!");
    console.log("Video Source: "+ $('#video').attr('src'));
    console.log("Video Duration: "+ $('#video').duration);
}, false);

好的，这是我现在拥有的代码。源打印得很好，但我仍然无法获得持续时间：/

4

4 回答 4

84

您实际上并不需要 jQuery，因为有一个媒体 API可以为您提供所需的一切。

var video = document.getElementById('myVideo');
video.src = 'my_video_' + value + '.ogg';
video.load();

媒体 API 还包含一个load()方法：“使元素重置并开始从头开始选择和加载新的媒体资源。”

（Ogg 不是最好的格式，因为它仅受有限数量的浏览器支持。我建议使用 WebM 和 MP4 来覆盖所有主要浏览器 - 您可以使用该canPlayType()功能来决定播放哪一个）。

然后，您可以等待loadedmetadata或loadeddata（取决于您想要的）事件触发：

video.addEventListener('loadeddata', function() {
   // Video is loaded and can be played
}, false);
于 2012-12-14T08:42:58.463 回答
13

作为对您问题的最后一部分的回应，仍然没有答案......当您编写 时$('#video').duration，您要求的duration是不存在的 jQuery 集合对象的属性。本机 DOM 视频元素确实具有持续时间。你可以通过几种方式得到它。

这是一个：

// get the native element directly
document.getElementById('video').duration

这是另一个：

// get it out of the jQuery object
$('#video').get(0).duration

还有一个：

// use the event object
v.bind('loadeddata', function(e) {
  console.log(e.target.duration);
});
于 2013-10-02T05:06:37.630 回答
2

您可以在 video 标签的属性中使用 preload="none"，这样只有当用户点击播放按钮时才会显示视频。

<video preload="none">

于 2018-04-26T08:20:30.023 回答
1

加载时调用函数：

<video onload="doWhatYouNeedTo()" src="demo.mp4" id="video">

获取视频时长

var video = document.getElementById("video");
var duration = video.duration;
于 2017-07-03T08:14:00.063 回答