index.htm (4576B)
1 <head> 2 <link href="//vjs.zencdn.net/5.4.4/video-js.css" rel="stylesheet"> 3 <link href="//cdn.rawgit.com/kmoskwiak/videojs-resolution-switcher/master/lib/videojs-resolution-switcher.css" rel="stylesheet"> 4 <link href="//cdn.rawgit.com/mmcc/videojs-skin-twitchy/v1.0.0/dist/videojs-skin-twitchy.css" rel="stylesheet" type="text/css"> 5 <link rel="stylesheet" href="css/yt-player.css"> 6 <link href="../node_modules/videojs-playlist-ui/dist/videojs-playlist-ui.vertical.css" rel="stylesheet"> 7 <!-- If you'd like to support IE8 --> 8 <script src="//vjs.zencdn.net/ie8/1.1.1/videojs-ie8.min.js"></script> 9 </head> 10 11 <body> 12 <ol class="vjs-playlist"></ol> 13 <!--<video id="my-video" class="video-js vjs-skin-twitchy" controls preload="auto" width="98%" height="98%"--> 14 <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="98%" height="98%" 15 poster="MY_VIDEO_POSTER.jpg" data-setup="{}"> 16 <!--<source src="MY_VIDEO.webm" type='video/webm'>--> 17 <source src="vids/Intro.mp4" type='video/mp4'> 18 <source src="rtmp://your.streaming.provider.net/cfx/st/" type="rtmp/mp4"> 19 <p class="vjs-no-js"> 20 To view this video please enable JavaScript, and consider upgrading to a web browser that 21 <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> 22 </p> 23 </video> 24 <style> 25 /* Show the controls (hidden at the start by default) */ 26 .video-js .vjs-control-bar { display: block; } 27 28 /* Make the CDN fonts accessible from the CSS */ 29 @font-face { 30 font-family: 'VideoJS'; 31 src: url('//vjs.zencdn.net/f/1/vjs.eot'); 32 src: url('//vjs.zencdn.net/f/1/vjs.eot?#iefix') format('embedded-opentype'), 33 url('//vjs.zencdn.net/f/1/vjs.woff') format('woff'), 34 url('//vjs.zencdn.net/f/1/vjs.ttf') format('truetype'); 35 } 36 37 /* Make the demo a little prettier */ 38 body { background: #222; text-align: center; } 39 .video-js { margin: 20px auto; } 40 41 </style> 42 <script src="http://vjs.zencdn.net/5.4.4/video.js"></script> 43 <script src="node_modules/videojs-playlist/dist/videojs-playlist.min.js"></script> 44 <script src="node_modules/videojs-playlist-ui/dist/videojs-playlist-ui.js"></script> 45 <script src="https://cdn.rawgit.com/kmoskwiak/videojs-resolution-switcher/master/lib/videojs-resolution-switcher.js"></script> 46 <script> 47 videojs('my-video', { 48 controls: true, 49 nativeControlsForTouch: false, 50 width: 1000, 51 height: 600, 52 plugins: { 53 ass: { 54 'src': ["subs/os.ass"] 55 }, 56 videoJsResolutionSwitcher: { 57 default: 'low', // Default resolution [{Number}, 'low', 'high'], 58 dynamicLabel: true // Display dynamic labels or gear symbol 59 } 60 }, 61 playbackRates: [0.5, 1, 1.5, 2] 62 }, function(){ 63 var player = this; 64 window.player = player 65 // Add dynamically sources via updateSrc method 66 player.updateSrc([ 67 { 68 src: 'http://media.xiph.org/mango/tears_of_steel_1080p.webm', 69 type: 'video/webm', 70 label: '360' 71 }, 72 { 73 src: 'https://vjs.zencdn.net/v/oceans.mp4?hd', 74 type: 'video/mp4', 75 label: '720' 76 } 77 ]) 78 79 player.on('resolutionchange', function(){ 80 console.info('Source changed to %s', player.src()) 81 }) 82 83 }).playlist([{ 84 sources: [{ 85 src: 'http://media.w3.org/2010/05/sintel/trailer.mp4', 86 type: 'video/mp4' 87 }], 88 poster: 'http://media.w3.org/2010/05/sintel/poster.png' 89 }, { 90 sources: [{ 91 src: 'http://media.w3.org/2010/05/bunny/trailer.mp4', 92 type: 'video/mp4' 93 }], 94 poster: 'http://media.w3.org/2010/05/bunny/poster.png' 95 }, { 96 sources: [{ 97 src: 'http://vjs.zencdn.net/v/oceans.mp4', 98 type: 'video/mp4' 99 }], 100 poster: 'http://www.videojs.com/img/poster.jpg' 101 }, { 102 sources: [{ 103 src: 'http://media.w3.org/2010/05/bunny/movie.mp4', 104 type: 'video/mp4' 105 }], 106 poster: 'http://media.w3.org/2010/05/bunny/poster.png' 107 }, { 108 sources: [{ 109 src: 'http://media.w3.org/2010/05/video/movie_300.mp4', 110 type: 'video/mp4' 111 }], 112 poster: 'http://media.w3.org/2010/05/video/poster.png' 113 }]); 114 115 videojs('my-video').playlist.autoadvance(0); 116 videojs('my-video').videoJsResolutionSwitcher(); 117 videojs('my-video').playlistUi(); 118 </script> 119 </body>