如何通过已列出的播放列表播放 HTML 5 中的视频？答案

【问题标题】：How to play a video in HTML 5 by playlist already listed?如何通过已列出的播放列表播放 HTML 5 中的视频？
【发布时间】：2017-06-05 10:48:12
【问题描述】：

我有一个这样的代码 index.html：我创建样式、脚本和视频主体。

<html>
<head>
<title>tes video</title>
</head>
<style type="text/css">
        #playlist {
        display:table;
    }
    #playlist li{
        cursor:pointer;
        padding:8px;
    }

    #playlist li:hover{
        color:blue;                        
    }
    #videoarea {
        float:left;
        width:1280px;
        height:720px;
        margin:10px;    
        border:1px solid silver;
    }
</style>
<script type="text/javascript">
        $(function() {
            $("#playlist li").on("click", function() {
            $("#videoarea").attr({
                "src": $(this).attr("movieurl"),
                "autoplay": "autoplay"
                "type: video/mp4"
            })
        })
            $("#videoarea").attr({
            "src": $("#playlist li").eq(0).attr("movieurl"),
        })
        })
</script>

<body>
    <video id="videoarea" controls="controls" src=""></video>

    <ul id="playlist">
        <li movieurl="kendrickdna.mp4">Dna</li>
        <li movieurl="kendrickhumble.mp4">Humble</li>
    </ul>
</body>
<html>

我想在我的 html 中创建一个简单的播放列表视频，但视频没有出现，我错了什么？提前致谢

【问题讨论】：

标签： html html5-video playlist

【解决方案1】：

此处的语法错误：“类型：视频/mp4”。

它应该是“类型”：“视频/mp4”。

您可以在此处查看示例 - jsfiddle.net/kv9s9a0a/1

$("#playlist li").on("click", function(){
    $("#videoarea").attr({
    "src": $(this).data("movieurl"),
    "autoplay": true,
    "type": "video/mp4"
  });
});

【讨论】：