UNPKG

videojs-resolution-switcher

Version:
64 lines (59 loc) 1.56 kB
<!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>