在第一个视频结束后更改视频源 [英] Change video source after the first video ends

问题描述

我的设计中有两个视频文件。第一个是标志揭示动画，第二个是标志动画。我只想在每次加载页面时加载第一个视频。我想在第一个视频结束后加载第二个视频。

这里我的目标是：第一个视频在页面加载时播放（仅限一次 - 每页加载）。如果第一个视频结束，第二个视频将在循环中播放。我不想一次又一次显示徽标（第1次）。这个怎么做。希望我会得到解决方案。

以下是我的代码。

HTML：

 < video width =400controls id =myVideoautoplay> 
< source src =http://www.w3schools.com/html/mov_bbb.mp4type =video / mp4> 
< source src =http://www.w3schools.com/html/mov_bbb.oggtype =video / ogg> 
您的浏览器不支持HTML5视频。 
< / video> 
  

JS

  document.getElementById（'myVideo'）。addEventListener（'ended'，myHandler，false）; 
函数myHandler（e）{
 alert（）; 
 var videoFile ='https://static.videezy.com/system/resources/previews/000/002/165/original/Black-cat-in-green-grass.mp4'; 
 $（'#myVideo source'）。attr（'src'，videoFile）; 
 $（＃myVideo）[0] .load（）; 
} 
  

演示： https://jsfiddle.net/jLa1s62w/

解决方案

它。

  document.getElementById（'myVideo'）。addEventListener（'ended'，myHandler，false）; 
 
函数myHandler（e）{
 alert（）; 
 var videoFile ='https://static.videezy.com/system/resources/previews/000/002/165/original/Black-cat-in-green-grass.mp4'; 
 $（'#myVideo source'）。attr（'src'，videoFile）; 
 $（'＃myVideo'）。attr（loop，true）; / * 1 * / 
 $（＃myVideo）[0] .load（）; 
 document.getElementById（'myVideo'）。removeEventListener（'ended'，myHandler，false）/ * 2 * / 
} 
  

1）循环属性让第二个视频循环。

2）删除事件监听器，以便视频不会再被替换。

https://jsfiddle.net/注意：如果你使用jQuery，你也可以使用jQuery的事件方法：
$（'＃myVideo'）。on（'ended'，myHandler）和 $（'＃myVideo'）。off（'ended'，myHandler）

I have two video files in my design. The first one is logo reveal animation and the second one is logo animation. I want to load the first video only when the page loads every time. And i want to load the second video after the first video ends.

Here my target is: 1st video plays when the page loads(only one time - every page load). If the first video ends, the second video will plays in the loop. I don't want to show the logo reveal(1st) again and again. How to do this. Hope i'll be getting the solution.

Here are the code i have.

HTML :

<video width="400" controls id="myVideo" autoplay>
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

JS

  document.getElementById('myVideo').addEventListener('ended',myHandler,false);
    function myHandler(e) {
        alert();
        var videoFile = 'https://static.videezy.com/system/resources/previews/000/002/165/original/Black-cat-in-green-grass.mp4';
       $(' #myVideo source').attr('src', videoFile);
       $("#myVideo")[0].load();
    }

Demo : https://jsfiddle.net/jLa1s62w/

解决方案

You almost got it.

document.getElementById('myVideo').addEventListener('ended', myHandler, false);

function myHandler(e) {
    alert();
    var videoFile = 'https://static.videezy.com/system/resources/previews/000/002/165/original/Black-cat-in-green-grass.mp4';
    $(' #myVideo source').attr('src', videoFile);
    $('#myVideo').attr("loop", true); /* 1 */
    $("#myVideo")[0].load();
    document.getElementById('myVideo').removeEventListener('ended', myHandler, false) /* 2 */
}

1) Loop attribute so the second video loops.

2) Remove event listener so the video isn't replaced again.

https://jsfiddle.net/yuriy636/jLa1s62w/1/

Note: If you are using jQuery, you can also use jQuery's event method: $('#myVideo').on('ended',myHandler) and $('#myVideo').off('ended',myHandler)

这篇关于在第一个视频结束后更改视频源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！