我需要帮助创建一个HTML5视频播放器与播放列表，自动播放播放列表中的所有视频

I need help in creating an HTML5 Video Player with an Playlist that automatically plays all videos in the Playlist

本文关键字：视频 播放列表 播放器 自动播放 HTML5 创建 帮助 一个      更新时间：2023-09-26

首先，我不是一个程序员，我对HTML和CSS有一些基本的了解，但当涉及到javascript时，我几乎迷路了。我发现这个jsfiddle: http://jsfiddle.net/Jzs6B/655/与HTML5播放器与播放列表，是否有可能升级这个播放器，使它开始自动播放播放列表中的第一个视频，一旦播放器加载，然后第二个当第一个结束，等等，直到播放列表中的所有视频已经播放从上到下?

下面是相关的javascript代码: 
$(function() {
    $("#playlist li").on("click", function() {
        $("#videoarea").attr({
            "src": $(this).attr("movieurl"),
            "poster": "",
            "autoplay": "autoplay"
        })
    })
    $("#videoarea").attr({
        "src": $("#playlist li").eq(0).attr("movieurl"),
        "poster": $("#playlist li").eq(0).attr("moviesposter")
    })
})​

Try This

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>mouseover demo</title>
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <style>
        #videoarea {
    float:left;
    width:640px;
    height:480px;
    margin:10px;    
    border:1px solid silver;
}
    </style>
    <script type="text/javascript">
        var i = 0;
        var totalVideos = 2; //have added 3 videos to source 0 - 2
        var myArray1 = new Array(
"http://html5videoformatconverter.com/data/images/happyfit2.mp4",
"http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4",
"http://html5example.net/static/video/html5_Video_VP8.webm");
        var now = 0;
        $(function () {
            $("#videoarea").attr({
                "src": myArray1[0]
            })
        });
        function next(e) {
            i += 1;
            $("#videoarea").attr({
                "src": myArray1[i]
            });
            if (i == totalVideos ) {
                i = 0;
            }
        }
    </script>
</head>
<body>
    <div id="AnchorHolder" style="width:50%; height:50%;">
        <video id="videoarea" onended="next(this)" controls="controls" poster="" src="" autoplay></video>
    </div>
    <button onclick='submitForm()'>
        Save</button>
</body>
</html>

解释:1)将视频源存储为数组。2)设置计数器i = 0和文件数3)在视频结束时，将src改为数组中的下一个对象，并设置计数器，使其在最后一个视频播放后返回0。

希望这对你有帮助。如果你需要更多帮助，请告诉我。如果答案解决了你的问题，也接受。

相关文章：