Question

我真的很难过这个。我想在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();
    }

我使用select元素供用户选择视频，使用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事件而没有运气。当我检查视频事件结束时，侦听器从不调用我的默认视频功能。任何帮助都会非常感激。感谢

Answer 1

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

<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
</head>
<body>
<video id="video" width="500" height="400" 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视频触发事件一次触发

1 个答案: