HTML5 video onended 事件触发一次

Posted

技术标签:

【中文标题】HTML5 video onended 事件触发一次【英文标题】:HTML5 video onended event firing once 【发布时间】:2012-06-19 15:01:16 【问题描述】:

我真的被这个难住了。 我正在尝试在 safari 中使用 html5 视频播放器和 javascript。我想要 1 播放问候视频 2 在用户进行选择时播放默认循环视频 3 播放用户选择 4 返回默认循环播放视频。

1、2、3 有效,但 4 无效。

我从正文中调用问候视频

<video id="videok" width=400 height=400 autoplay="autoplay" src="sacagreeting.mov" >

    video not supported
</video>

我在正文中设置了我的事件监听器

body onload="myAddListener()"

 function myAddListener()
    var myVideo = document.getElementsByTagName('video')[0];
        myVideo.addEventListener('ended',myNewSrc,false);
        

我播放循环默认视频的功能是

function myNewSrc() 
        myVideo = document.getElementsByTagName('video')[0];
        myVideo.src="sacarest.mov";
    myVideo.loop="loop";
        myVideo.load();
        myVideo.play();
    

我使用一个选择元素让用户选择一个视频和 onchange 事件来调用我的视频函数

function myNewSrcii() 

        myVideo = document.getElementById('videok');

    myVideo.loop=""

    myquest = document.getElementById('vidquest').value;

    switch(myquest)
    
    case "a":
        myVideo.src="sacaa.mov"; 
        break;
    case "b":
        myVideo.src="sacab.mov";
        break;
    case "c":
        myVideo.src="sacac.mov";
        break;
    case "d":
        myVideo.src="sacad.mov";
        break;
    case "e":
        myVideo.src="sacae.mov";
        break;
    case "f":
        myVideo.src="sacaf.mov";

    

     myVideo.load();
     myVideo.play();

我尝试删除循环属性,在 myNewSrcii 函数中再次设置事件侦听器,在视频标签中使用 onended 事件,但没有运气。当我检查视频事件结束为真时,监听器从不调用我的默认视频函数。任何帮助将不胜感激。 谢谢

【问题讨论】:

【参考方案1】:

这是由于 Safari 的 HTML5 视频标签实现中的一个奇怪错误造成的。它也可以在 Windows 的 Safari 上复制。我刚刚找到了一个解决这个问题的方法——只需绑定到loadedmetadata 事件并将currentTime 设置为某个非零值。这是一个例子:

<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
</head>
<body>
<video id="video"   controls autoplay></video>
<script>
var src = [
 "http://content.adfox.ru/131007/adfox/205544/865991_11.mp4",
 "http://all.rutube.ru/130627/gpmdigital/217059/805529_11.mp4"
];
var curSrc = 0;
$(function() 
 $('#video').attr("src", src[curSrc % src.length]);
 curSrc++;
 var video = $('#video').get(0);

 $('#video')
 .on('loadedmetadata', function() 
  video.currentTime=0.01;
  video.play();
 )
 .on('ended', function() 
  console.log('ended');
  video.src = src[curSrc % src.length];
  video.load();
  curSrc++;
 );
);
</script>
</body>
</html>

你可以在这个 jsfiddle 中尝试这个演示:http://jsfiddle.net/j2knz6sv/

【讨论】:

以上是关于HTML5 video onended 事件触发一次的主要内容,如果未能解决你的问题,请参考以下文章

播放多个音视频文件

onEnded 事件未在 dojo 对话框中触发

如果我嵌入标签,onEnded 事件将不起作用

自动播放 HTML5 视频

video.js currentTime() 不正确,直到 timeupdate 事件触发

怎么让html5的video横屏播放