videojs-playlist/dev.html.example at master · cfx/videojs-playlist · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>HTML5 Video Player</title>

  <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
  <script src="http://vjs.zencdn.net/c/video.js"></script>

  <link href="design/playlist.css" rel="stylesheet" type="text/css">
  <script src="src/playlist.js"></script>
</head>

<body>
  <video id="vid1"
         class="video-js vjs-default-skin"
         controls
         preload="auto"
         width="640"
         height="264"
         poster="http://video-js.zencoder.com/oceans-clip.png"
         data-setup='{
           "playlist":[
              {"thumb_url":"http://video-js.zencoder.com/oceans-clip.png",
               "poster_url":"http://video-js.zencoder.com/oceans-clip.png",
               "sources":[
                 {"src":"http://video-js.zencoder.com/oceans-clip.mp4",
                  "type":"video/mp4",
                  "media":"",
                  "title":""},
                 {"src":"http://video-js.zencoder.com/oceans-clip.ogv",
                  "type":"video/ogg",
                  "media":"",
                  "title":""
                 }
               ]
              },
              {"thumb_url":"http://d1p69vb2iuddhr.cloudfront.net/assets/demo/midnight_sun_800-b6c47c7ce67c56d909dadb21aa350eaa.jpg",
               "poster_url":"http://d1p69vb2iuddhr.cloudfront.net/assets/demo/midnight_sun_800-b6c47c7ce67c56d909dadb21aa350eaa.jpg",
               "sources":[
                 {"src":"http://media.jilion.com/videos/demo/midnight_sun_sv1_360p.mp4",
                  "type":"video/mp4",
                  "media":"",
                  "title":""}
                ]
              },
              {"thumb_url":"http://video-js.zencoder.com/oceans-clip.png",
               "poster_url":"http://video-js.zencoder.com/oceans-clip.png",
               "sources":[
                 {"src":"http://video-js.zencoder.com/oceans-clip.mp4",
                  "type":"video/mp4",
                  "media":"",
                  "title":""}
                ]
              },
              {"thumb_url":"http://d1p69vb2iuddhr.cloudfront.net/assets/demo/midnight_sun_800-b6c47c7ce67c56d909dadb21aa350eaa.jpg",
               "poster_url":"http://d1p69vb2iuddhr.cloudfront.net/assets/demo/midnight_sun_800-b6c47c7ce67c56d909dadb21aa350eaa.jpg",
               "sources":[
                 {"src":"http://media.jilion.com/videos/demo/midnight_sun_sv1_360p.mp4",
                  "type":"video/mp4",
                  "media":"",
                  "title":""}
                ]
              },
              {"thumb_url":"http://video-js.zencoder.com/oceans-clip.png",
               "poster_url":"http://video-js.zencoder.com/oceans-clip.png",
               "sources":[
                 {"src":"http://video-js.zencoder.com/oceans-clip.mp4",
                  "type":"video/mp4",
                  "media":"",
                  "title":""}
                ]
              }
            ]
          }'>
    <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'/>
    <p>Video Playback Not Supported</p>
  </video>
</body>
</html>