4

私はいくつかのコードを編集し、いくつかの変更を加えて、video-js youtubeplaylist プレーヤーを動作させました。

キャプションや字幕をプレイリストに追加する方法を知りたい

例はここにあります：

http://bestimage.x10.mx/Playlist_yt/YouTube_PlayList.html

<!DOCTYPE html>
<html>
<head>
     <title>YouTube Playlist Video Player</title>

 <link href="./css/video-js.css" rel="stylesheet">
 <link href="./css/video-js_playlist.css" rel="stylesheet" type="text/css">

 <script src="./js/video-js_youtube.js"></script>
 <script src="./js/video-js_playlist.js"></script>
     <script>_V_.options.flash.swf = "video-js.swf";</script>

</head>

<body>

<div text-align:center>
  <video id="vid1"
     class="video-js vjs-default-skin"
     controls
     preload="auto"
     width="854"
     height="480"
     data-setup='{"techOrder":["html5","flash","youtube"],"ytcontrols":false,
       "playlist":[
        {"thumb_url":"media/gates_th.jpg",
           "poster_url":"",
           "sources":[
             {"src":"http://www.youtube.com/watch?v=fQ-ktGaWYlg",
              "type":"video/youtube",
              "media":"",
              "title":""},
            ]
          },
        {"thumb_url":"media/AndYouAndI_th.jpg",
           "poster_url":"",
           "sources":[
             {"src":"http://www.youtube.com/watch?v=AYmeJlm7Gcg",
              "type":"video/youtube",
              "media":"",
              "title":""},
           ]
          },
        {"thumb_url":"media/CloseToTheEdge_th.jpg",
           "poster_url":"",
           "sources":[
             {"src":"http://www.youtube.com/watch?v=Ne317y_eOYs",
              "type":"video/youtube",
              "media":"",
              "title":""},
           ]
          },
        {"thumb_url":"media/AllGoodPeople_th.jpg",
           "poster_url":"",
           "sources":[
             {"src":"http://www.youtube.com/watch?v=bu1p2raTsbA",
              "type":"video/youtube",
              "media":"",
              "title":""},
           ]
          },
        {"thumb_url":"media/PerpetualChange_th.jpg",
           "poster_url":"",
           "sources":[
             {"src":"http://www.youtube.com/watch?v=1GYl3rVhQMY",
              "type":"video/youtube",
              "media":"",
              "title":""},
           ]
          },
        {"thumb_url":"media/BabaORiley_th.jpg",
           "poster_url":"",
           "sources":[
             {"src":"http://www.youtube.com/watch?v=hKUBTX9kKEo",
              "type":"video/youtube",
              "media":"",
              "title":""},
           ]
          },
        {"thumb_url":"media/WhoAreYou_th.jpg",
           "poster_url":"",
           "sources":[
             {"src":"http://www.youtube.com/watch?v=zufuNr1GBYI",
              "type":"video/youtube",
              "media":"",
              "title":""},
           ]
          },
        {"thumb_url":"media/PinballWizard_th.jpg",
           "poster_url":"",
           "sources":[
             {"src":"http://www.youtube.com/watch?v=aOUqRZkR8dE",
              "type":"video/youtube",
              "media":"",
              "title":""},
           ]
          },
        {"thumb_url":"media/MagicBus_th.jpg",
           "poster_url":"",
           "sources":[
             {"src":"http://www.youtube.com/watch?v=ob9w9F12SZM",
              "type":"video/youtube",
              "media":"",
              "title":""},
           ]
          },
        {"thumb_url":"media/5_15_th.jpg",
           "poster_url":"",
           "sources":[
             {"src":"http://www.youtube.com/watch?v=9Qv6QTrWXN4",
              "type":"video/youtube",
              "media":"",
              "title":""},
           ]
          }
        ]

      }'>
   </video>
  </div>
 </body>
</html>

ティア

4

0 に答える 0