HTML5 视频 onended 事件触发一次-6ren

HTML5 视频 onended 事件触发一次

转载作者：行者123 更新时间：2023-11-28 03:40:48

28

4

我真的被这个难住了。我正在尝试在 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

文章推荐： javascript - javascript this 又让我困惑了

文章推荐： c++ - 如果原始像素在新图像中为黑色，则 Qt 绘制蓝色像素

文章推荐： javascript - 调整窗口大小时 Canvas 元素没有响应

javascript onended 音频事件
我得到了带有播放/暂停 Action 的简单 javscript 函数。不幸的是，他只处理 onclick 事件。现在我还需要在播放 mp3 结束时更改图标颜色。现在最后图标颜色停止播放音频。我需要改
Javascript onended 正在检测视频的结尾
我的代码中的所有内容都有效。它只是在完成当前歌曲/视频后不会切换到下一首歌曲/视频。我尝试添加一个 onended 事件处理程序(在标记和 JavaScript 中)但失败了。我也尝试过 jQuery
Java 进程终止 - onEnd()？
当您通过 PID 强制终止进程时: kill -9 1123 是否有任何方法在进程终止时调用，直到关闭才停止？最佳答案对于java，你可以在你的进程中添加一个ShutdownHook，当sigte
c# - Blazor onended 不开火
我开始使用 Blazor。我的目的是一个接一个地播放随机视频。因此我想使用 Blazor 事件监听器。但是 onended 事件没有触发(onclick 一切正常)。视频元素:
javascript 在音频中添加 onend 事件
我希望这不会被认为是重复的，因为我已经搜索了许多与我的问题相关的问题。不过，我对 javarscript 和 jquery 完全是菜鸟，所以请记住这一点。我有以下代码，其中一切正常，但在音频文件完成
javascript - 调用Howler onend()方法的正确方法
我正在尝试使用 Howler on end 方法在轨道完成后更新某些属性，但它无法正常工作。代码如下: var track_number = 0; var sound = new Howl({
javascript - SpeechSynthesis - Onend 在语音结束前触发
我想创建一个与过去的 GoBarbara.com 类似的页面。文本字段的内容将从文本转换为语音。因此，我想使用 SpeechSynthesis API (javaScript)，它在触发 intro
javascript - 如果我嵌入标签，onEnded 事件不起作用
我有以下 html 但是 onEnded 事件没有触发。我该如何解决这个问题，我的代码有什么问题吗？我不想使用 JavaScript addEventListener 添加它，因
javascript - 为什么不能使用振荡器的递归 onended 属性来创建音乐音序器？
我很好奇为什么振荡器 onended 方法不能用于创建音乐音序器以及为什么使用“two clocks”方法更好。这是我的想法的粗略(有点工作)代码草图。 var x = oscillator.one
jQuery - 检测
我有一个页面，我必须在其中检测视频何时播放完毕，以便可以显示内容。我正在使用播放它和 $("video").bind("ended", function() { //Do s
HTML5 视频 onended 事件触发一次
我真的被这个难住了。我正在尝试在 safari 中使用 html5 视频播放器和 javascript。我想要1 播放问候视频2 在用户进行选择时播放默认的循环视频3 播放用户选择4 返回默认循环播放
javascript - 在不播放音频的情况下触发 onend 音频事件
我有多个音频文件需要播放，只有当所有音频都播放完毕后，才会显示下一部分。我编写的代码会自动触发，无需播放任何音频；我该怎么办？这是我的代码: Press play and wait for t
animation - Dojo Dialog onEnd() 动画异常
我在动画序列期间遇到 Dojo Dijit Dialog .hide() 方法的问题。我正在使用带有 Tundra 主题的 Dojo 1.7。我的对话框中有一个用于关闭对话框的取消按钮。
javascript - 视频播放，然后 onend() 覆盖带有链接的静态图像
我对 HTML5 非常陌生，因此我试图找到在 HTML5 中播放 Adobe After Effects 预制视频的最简单方法，然后用具有可点击图标的静态图像替换最后一帧。 1)我尝试了很多 JS
javascript - SpeechSynthesis API onend 回调不起作用
我正在使用Speech Synthesis API在 Google Chrome v34.0.1847.131 上。该 API 从 v33 开始在 Chrome 中实现。文本转语音在大多数情况下都有
javascript - ResponsiveVoice 只为多个话语调用 onend 回调一次
我想用相应的声音突出显示特定的段落/列表。 responsivevoice.js有没有回调。我得到了 onend 作为回调函数。但它不起作用。每当我使用 console 而不是 highlight
html - DART AudioBufferSourceNode onEnded 事件不工作
我正在尝试使用 DART 使用 HTML5 网络音频 API，但无法弄清楚为什么 onEnded 事件不起作用。这是代码 import 'dart:html'; import 'dart:web_a
node.js - Bacon.onEnd 不是一个函数
当我的系统产生错误时，这些错误会被收集并最终发送到票证 API。所有错误均按其优先级类型分组。因此，如果抛出两种不同的错误类型，则应发送两张票证。看起来像: var tickets = [{
javascript - Reactjs 视频 onEnded 事件未触发
我创建了一个 React 组件来播放视频。该组件正在正常播放视频，但未触发回调。 class VideoPlayer extends React.Component { componentWill
javascript - onEnded 事件未在 Dojo 对话框中触发
我试图让一个事件在电影播放完毕时触发。单击链接时会出现电影，该电影位于 dojo 对话框中。我正在使用标签播放电影，并尝试使用 dojo connect 在电影播放结束时使用 onEnded 属性显示

首页

博学

6Ren·AI

商城

HTML5 视频 onended 事件触发一次