Question

首先，我不是程序员，我有一些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")
    })
})

Answer 1

试试这个

<!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。

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

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

1 个答案: