diff options
Diffstat (limited to 'extlib/videojs-resolution-switcher/examples')
3 files changed, 242 insertions, 0 deletions
diff --git a/extlib/videojs-resolution-switcher/examples/flash.html b/extlib/videojs-resolution-switcher/examples/flash.html new file mode 100644 index 00000000..60dfb11d --- /dev/null +++ b/extlib/videojs-resolution-switcher/examples/flash.html @@ -0,0 +1,81 @@ +<!doctype html> +<html> +<head> + <meta charset="utf-8"> + <title>Video.js Resolution Switcher</title> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <link href="../node_modules/video.js/dist/video-js.css" rel="stylesheet"> + <link href="../lib/videojs-resolution-switcher.css" rel="stylesheet"> + <style> + body { + font-family: Arial, sans-serif; + background: #777; + } + .info { + background-color: #eee; + border: thin solid #333; + border-radius: 3px; + padding: 0 5px; + text-align: center; + } + .video-js { + margin: 40px auto; + } + </style> +</head> +<body> + <div class="info"> + <p> + Use flash + </p> + </div> + + <video id='video_flash' class="video-js vjs-default-skin"></video> + + <script src="../node_modules/video.js/dist/video.js"></script> + <script> + videojs.options.flash.swf = "../node_modules/video.js/dist/video-js.swf" + </script> + <script src="../lib/videojs-resolution-switcher.js"></script> + <script> + + // Use flash + videojs('video_flash', { + controls: true, + techOrder: ['flash'], + preload: 'auto', + width: 1000, + plugins: { + videoJsResolutionSwitcher: { + default: 'low', // Default resolution [{Number}, 'low', 'high'], + dynamicLabel: true // Display dynamic labels or gear symbol + } + } + }, function(){ + var player = this; + window.player = player + + player.updateSrc([ + { + src: 'https://vjs.zencdn.net/v/oceans.mp4?sd', + type: 'video/mp4', + label: 'SD', + res: 360 + }, + { + src: 'https://vjs.zencdn.net/v/oceans.mp4?hd', + type: 'video/mp4', + label: 'HD', + res: 720 + } + ]) + + player.on('resolutionchange', function(){ + console.info('Source changed to %s', player.src()) + }) + + }) + + </script> +</body> +</html> diff --git a/extlib/videojs-resolution-switcher/examples/html5.html b/extlib/videojs-resolution-switcher/examples/html5.html new file mode 100644 index 00000000..a987cc42 --- /dev/null +++ b/extlib/videojs-resolution-switcher/examples/html5.html @@ -0,0 +1,97 @@ +<!doctype html> +<html> +<head> + <meta charset="utf-8"> + <title>Video.js Resolution Switcher</title> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <link href="../node_modules/video.js/dist/video-js.css" rel="stylesheet"> + <link href="../lib/videojs-resolution-switcher.css" rel="stylesheet"> + <style> + body { + font-family: Arial, sans-serif; + background: #777; + } + .info { + background-color: #eee; + border: thin solid #333; + border-radius: 3px; + padding: 0 5px; + text-align: center; + } + .video-js { + margin: 40px auto; + } + </style> +</head> +<body> + <div class="info"> + <p> + Set sources dynamically + </p> + </div> + + <video id='video' class="video-js vjs-default-skin"></video> + + <div class="info"> + <p> + Set sources inside <code><video></code> tag + </p> + </div> + + <video id="video_1" class="video-js vjs-default-skin" width="1000" controls data-setup='{}' muted> + <source src="https://vjs.zencdn.net/v/oceans.mp4?480" type='video/mp4' label='SD' res='480' /> + <source src="https://vjs.zencdn.net/v/oceans.mp4?1080" type='video/mp4' label='HD' res='1080'/> + <source src="https://vjs.zencdn.net/v/oceans.mp4?144" type='video/mp4' label='phone' res='144'/> + <source src="https://vjs.zencdn.net/v/oceans.mp4?2160" type='video/mp4' label='4k' res='2160'/> + </video> + + + <script src="../node_modules/video.js/dist/video.js"></script> + <script> + videojs.options.flash.swf = "../node_modules/video.js/dist/video-js.swf" + </script> + <script src="../lib/videojs-resolution-switcher.js"></script> + <script> + // fire up the plugin + videojs('video', { + controls: true, + muted: true, + width: 1000, + plugins: { + videoJsResolutionSwitcher: { + default: 'low', // Default resolution [{Number}, 'low', 'high'], + dynamicLabel: true // Display dynamic labels or gear symbol + } + } + }, function(){ + var player = this; + window.player = player + + player.updateSrc([ + { + src: 'https://vjs.zencdn.net/v/oceans.mp4?sd', + type: 'video/mp4', + label: 'SD', + res: 360 + }, + { + src: 'https://vjs.zencdn.net/v/oceans.mp4?hd', + type: 'video/mp4', + label: 'HD', + res: 720 + } + ]) + + player.on('resolutionchange', function(){ + console.info('Source changed to %s', player.src()) + }) + + }) + </script> + + + <script> + videojs('video_1').videoJsResolutionSwitcher() + </script> +</body> +</html> diff --git a/extlib/videojs-resolution-switcher/examples/youtube.html b/extlib/videojs-resolution-switcher/examples/youtube.html new file mode 100644 index 00000000..49b5ff97 --- /dev/null +++ b/extlib/videojs-resolution-switcher/examples/youtube.html @@ -0,0 +1,64 @@ +<!doctype html> +<html> +<head> + <meta charset="utf-8"> + <title>Video.js Resolution Switcher</title> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <link href="../node_modules/video.js/dist/video-js.css" rel="stylesheet"> + <link href="../lib/videojs-resolution-switcher.css" rel="stylesheet"> + <style> + body { + font-family: Arial, sans-serif; + background: #777; + } + .info { + background-color: #eee; + border: thin solid #333; + border-radius: 3px; + padding: 0 5px; + text-align: center; + } + .video-js { + margin: 40px auto; + } + </style> +</head> +<body> + <div class="info"> + <p> + Youtube tech + </p> + </div> + + <video id='video' class="video-js vjs-default-skin"></video> + + <script src="../node_modules/video.js/dist/video.js"></script> + <script src="../node_modules/videojs-youtube/dist/Youtube.js"></script> + <script src="../lib/videojs-resolution-switcher.js"></script> + <script> + // fire up the plugin + videojs('video', { + controls: true, + muted: true, + techOrder: ["youtube"], + width: 500, + sources: [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=iD_MyDbP_ZE"}], + plugins: { + videoJsResolutionSwitcher: { + default: 'low', + dynamicLabel: true + } + } + }, function(){ + var player = this; + window.player = player; + player.on('resolutionchange', function(){ + console.info('Source changed') + }) + }); + + </script> + + +</body> +</html>
\ No newline at end of file |