gpt4 book ai didi

HTML5 视频 onended 事件触发一次

转载 作者:行者123 更新时间:2023-11-28 03:40:48 28 4
gpt4 key购买 nike

我真的被这个难住了。我正在尝试在 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 事件,但没有成功。当我检查结束的视频事件是否为真时,监听器从不调用我的默认视频功能。任何帮助将不胜感激。谢谢

最佳答案

这是由于 Safari 的 HTML5 视频标签实现中的一个奇怪错误。它也可以在 Windows 的 Safari 上重现。我刚刚找到了解决此问题的一种方法 - 只需绑定(bind)到 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 视频 onended 事件触发一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11103782/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com