我有一个视频标签,我动态更改其来源,因为我让用户从数据库中选择一些视频。问题是,当我更改src属性时,即使我告诉它,视频也不会加载。
这是我的代码:
$("#video").attr('src', 'my_video_'+value+'.ogg');
$("#video").load();
while($("#video").readyState !== 4) {
console.log("Video is not ready");
};
代码仍然处于无限循环中。
任何帮助?
修改:
致Ian Devlin:
//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);
好的,这是我现在的代码。源打印很棒,但我仍然无法获得持续时间:/
答案 0 :(得分:70)
你真的不需要jQuery,因为有Media API为你提供所需的一切。
var video = document.getElementById('myVideo');
video.src = 'my_video_' + value + '.ogg';
video.load();
Media API还包含load()
方法,该方法:“使元素重置并开始从头开始选择和加载新媒体资源。”
(Ogg不是最好的格式,因为它只支持有限数量的浏览器。我建议使用WebM和MP4覆盖所有主流浏览器 - 您可以使用canPlayType()
功能决定玩哪一个。
然后,您可以等待loadedmetadata
或loadeddata
(取决于您想要的)事件:
video.addEventListener('loadeddata', function() {
// Video is loaded and can be played
}, false);
答案 1 :(得分:11)
回答你问题的最后部分,但仍然没有答案......当你写$('#video').duration
时,你要求jQuery集合对象的duration
属性,这不是'存在。原生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);
});
答案 2 :(得分:1)
您可以在视频标记的属性中使用preload =“none”,这样只有当用户点击播放按钮时才会显示视频。
<video preload="none">
答案 3 :(得分:0)
加载时调用函数:
<video onload="doWhatYouNeedTo()" src="demo.mp4" id="video">
获取视频时长
var video = document.getElementById("video");
var duration = video.duration;