2017-06-05 120 views
-2

我有一個代碼index.html像這樣: 我創建了樣式,腳本和視頻主體。如何通過已列出的播放列表播放HTML 5中的視頻?

<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中創建一個簡單的播放列表視頻,但視頻不出現,我錯了什麼?在此先感謝

回答

0

語法錯誤在這裏:「type:video/mp4」。

它應該是「type」:「video/mp4」。

,你可以在這裏看到的例子 - jsfiddle.net/kv9s9a0a/1

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