如何使用 HTML5 和 javascript 动态循环显示多个视频答案

【问题标题】：how to display multiple videos one by one dynamically in loop using HTML5 and javascript如何使用 HTML5 和 javascript 动态循环显示多个视频
【发布时间】：2014-01-07 06:34:55
【问题描述】：

我正在尝试使用 html5 和 java 脚本一一显示多个视频.. 但它没有来.. 我使用下面的代码

<html>
<head>
<title>video example</title>
</head>
<script>
video_count =1;
videoPlayer = document.getElementById("ss");
video=document.getElementById("myVideo");

function run(){
        video_count++;
        //alert(video_count);
        if (video_count == 4) video_count = 1;
        var nextVideo = "video/video"+video_count+".mp4";
        //videoPlayer.src = nextVideo;
        alert(nextVideo);
        videoPlayer.setAttribute("src", nextVideo[video_count]);
        videoPlayer.play();
   }
videoPlayer.onended(function(e) {
     if (!e) {
        e = window.event;
    } 
 run();
};
</script>
<body onload="run();">
<video id="myVideo" height="400" width="400" autoplay>   
  <source id="ss"  src="video/video1.mp4" type='video/mp4'>

</video>
</body>
</html>

当前代码只显示第一个视频，它将停止...

【问题讨论】：

HTML5 video loop src change on end play function not working 的可能重复项
为什么一个问题要问两次？
我都试过了，但它不适合我

标签： javascript html

【解决方案1】：

让我看看我的：D

<html>
<head>
    <title>Subway Maps</title>

    <link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body onload="onload();">
    <video id="idle_video" width="1280" height="720" onended="onVideoEnded();"></video>
    <script>
        var video_list      = ["Skydiving Video - Hotel Room Reservation while in FreeFall - Hotels.com.mp4",
                                "Experience Conrad Hotels & Resorts.mp4",
                                "Mount Airy Casino Resort- Summer TV Ad 2.mp4"
                            ];
        var video_index     = 0;
        var video_player    = null;

        function onload(){
            console.log("body loaded");
            video_player        = document.getElementById("idle_video");
            video_player.setAttribute("src", video_list[video_index]);
            video_player.play();
        }

        function onVideoEnded(){
            console.log("video ended");
            if(video_index < video_list.length - 1){
                video_index++;
            }
            else{
                video_index = 0;
            }
            video_player.setAttribute("src", video_list[video_index]);
            video_player.play();
        }
    </script>
</body>

【讨论】：

为此，您需要为<video> 标签添加muted="muted"
视频结束时刷新视频元素，如何消除那个光点并流畅播放下一个视频？

【解决方案2】：

<html>
<head>
<title>video example</title>
</head>

<body>
    <video id="myVideo" height="400" width="400" autoplay onended="run();">   
        <source id="ss"  src="video/video1.mp4" type='video/mp4'>
    </video>

    <script>
        video_count =1;
        videoPlayer = document.getElementById("ss");        
        video=document.getElementById("myVideo");

        function run(){
            video_count++;
            if (video_count == 4) video_count = 1;
            videoPlayer.setAttribute("src","video/video"+video_count+".mp4");       
            video.play();

       }

    </script>
</body>
</html>

变化：

在关闭 body 标记之前放置 javascript 代码，以确保在脚本运行之前加载视频对象。
video 元素已经有一个“onended”属性，因此您可以从那里调用 run 函数。
videoPlayer.setAttribute("src", nextVideo[video_count]); 有问题。 nextVideo[video_count] 暗示 nextVideo 是一个数组，但不是。它是一个字符串。所以设置属性的时候可以直接使用nextVideo。
videoPlayer = document.getElementById("ss"); 获取源元素。您不能在该对象上调用 play() 函数，仅仅是因为没有为它定义该函数。所以video.play() 应该可以正常工作。

希望这能解决您的问题。

【讨论】：

我遇到了这两个错误 Denying load of chrome-extension://kdidombaedgpfiiedeimiebkmbilgmlc/css/jquery_ui/images/ui-bg_flat_75_ffffff_40x100.png。资源必须列在 web_accessible_resources 清单键中，才能被扩展之外的页面加载。
谁能告诉我如何在上面的代码中为每个视频设置时长？
当我们从video_count文件夹中逐一访问视频时，如果文件夹中的任何一个视频被删除..如何跳过该视频并转到下一个？有人可以在这部分推荐我吗？
为此，我必须添加 video.load();在 video.play();. 之前
@This_is_me only video.load();足以加载下一个视频并开始播放。

【解决方案3】：

在此函数调用之前 video.play();需要添加：video.load(); 否则它仍然会显示上一个视频。所以代码应该是

video.load();

video.play();

【讨论】：

【解决方案4】：

一切正常。谢谢你！

我在下面附上了一点修改的代码，希望这对搜索视频全屏连续播放的人有所帮助，

enter image description here

【讨论】：

请不要放代码图片，而是直接将代码粘贴到编辑器中并格式化为代码。帮助格式化stackoverflow.com/editing-help
这不是回复，而是评论，应该放在您想要感谢的任何回复下。