Created
February 24, 2019 17:30
-
-
Save onigetoc/c579325f7207edbfbe7e83eddcafa1c6 to your computer and use it in GitHub Desktop.
Videojs 7 Player all videos format
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="instructions"> | |
| <!-- <video id="vid1" class="video-js vjs-default-skin vjs-fluid" controls autoplay width="640" height="360"></video> --> | |
| <video id="vid1" class="video-js vjs-default-skin vjs-fluid" poster="http://i.imgur.com/xxqm7EE.png" width="640" height="360" controls autoplay preload="none" data-setup='{ "techOrder": ["html5", "youtube"], "sources": [{ "type": "application/x-mpegURL", "src": "https://nmxlive.akamaized.net/hls/live/529965/Live_1/index.m3u8"}]}'></video> | |
| <!-- <video id="vid1" class="video-js vjs-default-skin vjs-fluid" controls width="640" height="264" data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=xjS6SftYQaQ"}] }'> | |
| </video> --> | |
| <h2>Load Video:</h2> | |
| <form id="vsg-loadvideo"> | |
| Video URL: | |
| <br> | |
| <input type="text" name="vidurl" id="vsg-vurl" style="width:450px" value="https://www.youtube.com/watch?v=xDMP3i36naA" placeholder="Enter Youtube URL"> | |
| <br> | |
| <br> | |
| <input type="submit" value="Load video"> | |
| </form> | |
| <ul id="vidlink"> | |
| <li><a id="myLink" title="Click video" href="https://nmxlive.akamaized.net/hls/live/529965/Live_1/index.m3u8">Play HLS</a></li> | |
| <li><a id="myLink" title="Click video" href="http://jplayer.org/video/m4v/Incredibles_Teaser.m4v">Play .M4V</a></li> | |
| <li><a id="myLink" title="Click video" href="//assets3.ign.com/videos/zencoder/2016/06/15/640/7080c56a76e2b74ec8ecfe4c224441d4-500000-1466028542-w.mp4">Play .MP4</a></li> | |
| <li><a id="myLink" title="Click video" href="https://www.youtube.com/watch?v=kkGeOWYOFoA">Play Youtube</a></li> | |
| <li><a id="myLink" title="Click video" href="https://www.youtube.com/watch?v=iIMXsvB58W0">Play Youtube Live</a></li> | |
| <li><a id="myLink" title="Click video" href="https://yt-dash-mse-test.commondatastorage.googleapis.com/media/car-20120827-manifest.mpd">Play Dash (.mpd)</a></li> | |
| <li><a id="myLink" title="Click video" href="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v">Play .M4V</a></li> | |
| <li><a id="myLink" title="Click video" href="http://jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm">Play .webm</a></li> | |
| <li><a id="myLink" title="Click video" href="https://github.com/robovm/apple-ios-samples/blob/master/avTouch/sample.m4a?raw=true">Play .M4a (audio)</a></li> | |
| <li><a id="myLink" title="Click video" href="https://rt-news.secure.footprint.net/1103-inadv-qidx-1k_v3.m3u8 | |
| ">Play .m3u8 streaming</a></li> | |
| <li><a id="myLink" title="Click video" href="http://techslides.com/demos/sample-videos/small.flv">Play .FLV (Do not work on JSFiddle)</a></li> | |
| </ul> | |
| Audio: <a href="https://www.qub.radio" target="_blank">QUB Radio</a> | |
| <audio id="audio_example" class="video-js vjs-default-skin" controls preload="auto" width="300" height="300" poster="http://i.imgur.com/ukfPr2Q.png" data-setup='{}'> | |
| <source src="http://18183.live.streamtheworld.com:3690/QUB_RADIO_SC" type='audio/mp3' /> | |
| </audio> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* VIDEOJS */ | |
| // declare object for video | |
| var vgsPlayer, poster; | |
| /* | |
| vgsPlayer = videojs('vid1', { | |
| techOrder: ['youtube'], | |
| autoplay: false, | |
| sources: [{ | |
| type: "video/youtube", | |
| src: "https://www.youtube.com/watch?v=xjS6SftYQaQ" | |
| }] | |
| }); | |
| */ | |
| vgsPlayer = videojs('vid1'); | |
| // RELOAD VIDEO ON CLICK LIVE BUTTON GC | |
| $(document).on('click', '.vjs-live-display', function() { | |
| vgsPlayer.src({ | |
| "type": vgsPlayer.currentType(), | |
| "src": vgsPlayer.currentSrc() | |
| }); | |
| vgsPlayer.load(); | |
| vgsPlayer.play(); | |
| }); | |
| vgsPlayer.on('error', function() { | |
| console.log('The following error occurred:', this.error()); | |
| }); | |
| /* | |
| vgsPlayer = videojs('vid1', { | |
| techOrder: ["html5", "flash", "youtube"], | |
| autoplay: false, | |
| youtube: { | |
| "iv_load_policy": 3 | |
| }, | |
| sources: [{ | |
| type: "video/mp4", | |
| src: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" | |
| }] | |
| }); */ | |
| //vgsPlayer.poster('https://img.youtube.com/vi/aqz-KE-bpKQ/maxresdefault.jpg'); | |
| //vgsPlayer.poster("http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4") | |
| //videojs("vid1").ready(function() { | |
| // vgsPlayer = this; | |
| //}); | |
| /********* LOAD URL *********/ | |
| $('#vidlink li a').on('click', function(e) { | |
| e.preventDefault(); | |
| var vidlink = $(this).attr('href'); | |
| $('#vsg-vurl').val(vidlink); | |
| $('input[type=submit]').click(); | |
| //vsgLoadVideo(vidlink); | |
| }); | |
| jQuery(function($) { | |
| // vsgLoadVideo("https://www.youtube.com/watch?v=r1H98REH0c0"); | |
| // Video on page load | |
| //jQuery(document).ready(function($) { | |
| $("#vsg-loadvideo").submit(function(e) { | |
| e.preventDefault(); | |
| var vidURL = $("#vsg-vurl").val(); | |
| vsgLoadVideo(vidURL); | |
| }); | |
| }); // jQuery(function($) END | |
| function vsgLoadVideo(vidURL, poster) { | |
| var type = getType(vidURL); | |
| console.log(type); | |
| if (getId(vidURL)) | |
| poster = "http://img.youtube.com/vi/" + getId(vidURL) + "/hqdefault.jpg"; | |
| vgsPlayer.src({ | |
| "src": vidURL, | |
| "type": type | |
| }); | |
| if (poster) | |
| vgsPlayer.poster(poster); | |
| else | |
| vgsPlayer.poster("//i.imgur.com/aE0LoTe.png"); | |
| // play seem to trigger to fast before Youtube is ready | |
| //vgsPlayer.pause(); | |
| vgsPlayer.load(); | |
| vgsPlayer.play(); | |
| /* setTimeout(function() { | |
| vgsPlayer.play(); | |
| }, 500); */ | |
| return false; | |
| } | |
| function ytVidId(url) { | |
| //var p = /^(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?(?=.*v=((\w|-){11}))(?:\S+)?$/; | |
| //var p = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/; | |
| var p = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=|\?v=)([^#\&\?]*).*/; | |
| if (url.match(p) || getId(url).length == 11) | |
| return false; | |
| } | |
| /**/ | |
| function getId(url) { | |
| //var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/; | |
| var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=|\?v=)([^#\&\?]*).*/; | |
| var match = url.match(regExp); | |
| if (match && match[2].length == 11) { | |
| return match[2]; | |
| } else { | |
| return false; | |
| } | |
| } | |
| var rtmp_suffix = /^rtmp:\/\//; | |
| var hls_suffix = /\.m3u8/; | |
| var mp4_suffix = /\.(mp4|m4p|m4v|mov)/i; | |
| var hds_suffix = /\.f4m/; | |
| var dash_suffix = /\.mpd/; | |
| var flv_suffix = /\.flv/; | |
| var webm_suffix = /\.webm/; | |
| /* AUDIO */ | |
| //var mp3_suffix = /\.mp3/; | |
| var mpeg_suffix = /\.(mp3|m4a)/i; | |
| var ogg_suffix = /\.ogg/; | |
| //var youtube_suffix = /\.youtube.com/; | |
| //var yt_suffix = /^(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?(?=.*v=((\w|-){11}))(?:\S+)?$/; | |
| var yt_suffix = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/; | |
| var dm_suffix = /\.?dailymotion.com/; | |
| var vm_suffix = /\.?vimeo.com/; | |
| /* ADVANCED REGEX */ | |
| // var regVimeo = /^.*(vimeo.com\/)((channels\/[A-z]+\/)|(groups\/[A-z]+\/videos\/))?([0-9]+)/; | |
| // var regDailymotion = /^.+dailymotion.com\/(video|hub)\/([^_]+)[^#]*(#video=([^_&]+))?/; | |
| // var regMetacafe = /^.*(metacafe.com)(\/watch\/)(d+)(.*)/i; | |
| // var youtube_suffix = /(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/; | |
| function getType(url) { | |
| /* AUDIO */ | |
| if (mpeg_suffix.test(url)) | |
| return 'audio/mpeg'; | |
| if (ogg_suffix.test(url)) | |
| return 'audio/ogg'; | |
| if (dash_suffix.test(url)) | |
| return 'application/dash+xml'; | |
| if (rtmp_suffix.test(url)) | |
| return 'rtmp/mp4'; | |
| if (hls_suffix.test(url)) | |
| return 'application/x-mpegurl'; | |
| if (mp4_suffix.test(url)) | |
| return 'video/mp4'; | |
| if (hds_suffix.test(url)) | |
| return 'application/adobe-f4m'; | |
| if (flv_suffix.test(url)) | |
| return 'video/flv'; | |
| if (webm_suffix.test(url)) | |
| return 'video/webm'; | |
| if (yt_suffix.test(url)) { | |
| //alert(url.match(yt_suffix)[2]); | |
| //player.poster(ytmaxres(url.match(yt_suffix)[2])); | |
| //alert(ytmaxres(url.match(yt_suffix)[2])); | |
| return 'video/youtube'; | |
| } | |
| if (dm_suffix.test(url)) | |
| return 'video/dailymotion'; | |
| if (vm_suffix.test(url)) | |
| return 'video/vimeo'; | |
| console.log('could not guess link type: "' + url + '" assuming mp4'); | |
| return 'video/mp4'; | |
| }; | |
| function getExt(ext) { | |
| //if (ext == "youtube") ext = "mp4"; | |
| if (ext == "mp4" || ext == "m4v") ext = "m4v"; | |
| if (ext == "ogg" || ext == "ogv") ext = "oga"; | |
| if (ext == "webm") ext = "webmv"; | |
| return ext; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | |
| <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/dashjs/2.9.2/dash.all.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-youtube/2.6.0/Youtube.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-dash/2.10.0/videojs-dash.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js-chromecast/2.0.9/videojs-chromecast.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.5.0/video.min.js"></script> | |
| <script src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #instructions { | |
| max-width: 640px; | |
| text-align: left; | |
| margin: 0px auto; | |
| } | |
| #instructions textarea { | |
| width: 100%; | |
| height: 100px; | |
| } | |
| /* Show the controls (hidden at the start by default) */ | |
| .video-js .vjs-control-bar { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| } | |
| /* Make the demo a little prettier */ | |
| body { | |
| background: #222; | |
| text-align: center; | |
| color: #aaa; | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| background: radial-gradient(#333, hsl(200, 30%, 6%)); | |
| } | |
| a, | |
| a:hover, | |
| a:visited { | |
| color: #76DAFF; | |
| } | |
| .vjs-live-display{ | |
| cursor:pointer | |
| } | |
| /**/ | |
| .video-js .vjs-menu-button-inline.vjs-slider-active,.video-js .vjs-menu-button-inline:focus,.video-js .vjs-menu-button-inline:hover,.video-js.vjs-no-flex .vjs-menu-button-inline{width:10em}.video-js .vjs-controls-disabled .vjs-big-play-button{display:none!important}.video-js .vjs-control{width:3em}.video-js .vjs-menu-button-inline:before{width:1.5em}.vjs-menu-button-inline .vjs-menu{left:3em}.video-js.vjs-paused .vjs-big-play-button,.vjs-paused.vjs-has-started.video-js .vjs-big-play-button{display:block}.video-js .vjs-load-progress div,.vjs-seeking .vjs-big-play-button,.vjs-waiting .vjs-big-play-button{display:none!important}.video-js .vjs-mouse-display:after,.video-js .vjs-play-progress:after{padding:0 .4em .3em}.video-js.vjs-ended .vjs-loading-spinner{display:none}.video-js.vjs-ended .vjs-big-play-button{display:block!important}.video-js *,.video-js:after,.video-js:before{box-sizing:inherit;font-size:inherit;color:inherit;line-height:inherit}.video-js.vjs-fullscreen,.video-js.vjs-fullscreen .vjs-tech{width:100%!important;height:100%!important}.video-js{font-size:14px;overflow:hidden}.video-js .vjs-control{color:inherit}.video-js .vjs-menu-button-inline:hover,.video-js.vjs-no-flex .vjs-menu-button-inline{width:8.35em}.video-js .vjs-volume-menu-button.vjs-volume-menu-button-horizontal:hover .vjs-menu .vjs-menu-content{height:3em;width:6.35em}.video-js .vjs-spacer,.video-js .vjs-time-control{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-flex:1 1 auto;-moz-box-flex:1 1 auto;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}.video-js .vjs-time-control{-webkit-box-flex:0 1 auto;-moz-box-flex:0 1 auto;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;width:auto}.video-js .vjs-time-control.vjs-time-divider{width:14px}.video-js .vjs-time-control.vjs-time-divider div{width:100%;text-align:center}.video-js .vjs-time-control.vjs-current-time{margin-left:1em}.video-js .vjs-time-control .vjs-current-time-display,.video-js .vjs-time-control .vjs-duration-display{width:100%}.video-js .vjs-time-control .vjs-current-time-display{text-align:right}.video-js .vjs-time-control .vjs-duration-display{text-align:left}.video-js .vjs-play-progress:before,.video-js .vjs-progress-control .vjs-play-progress:before,.video-js .vjs-remaining-time,.video-js .vjs-volume-level:after,.video-js .vjs-volume-level:before,.video-js.vjs-live .vjs-time-control.vjs-current-time,.video-js.vjs-live .vjs-time-control.vjs-duration,.video-js.vjs-live .vjs-time-control.vjs-time-divider,.video-js.vjs-no-flex .vjs-time-control.vjs-remaining-time{display:none}.video-js.vjs-no-flex .vjs-time-control{display:table-cell;width:4em}.video-js .vjs-progress-control{position:absolute;left:0;right:0;width:100%;height:.5em;top:-.5em}.video-js .vjs-progress-control .vjs-load-progress,.video-js .vjs-progress-control .vjs-play-progress,.video-js .vjs-progress-control .vjs-progress-holder{height:100%}.video-js .vjs-progress-control .vjs-progress-holder{margin:0}.video-js .vjs-progress-control:hover{height:1.5em;top:-1.5em}.video-js .vjs-control-bar{-webkit-transition:-webkit-transform .1s ease 0s;-moz-transition:-moz-transform .1s ease 0s;-ms-transition:-ms-transform .1s ease 0s;-o-transition:-o-transform .1s ease 0s;transition:transform .1s ease 0s}.video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-active .vjs-control-bar,.video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-inactive .vjs-control-bar,.video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-active .vjs-control-bar,.video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-control-bar,.video-js.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-control-bar{visibility:visible;opacity:1;-webkit-backface-visibility:hidden;-webkit-transform:translateY(3em);-moz-transform:translateY(3em);-ms-transform:translateY(3em);-o-transform:translateY(3em);transform:translateY(3em);-webkit-transition:-webkit-transform 1s ease 0s;-moz-transition:-moz-transform 1s ease 0s;-ms-transition:-ms-transform 1s ease 0s;-o-transition:-o-transform 1s ease 0s;transition:transform 1s ease 0s}.video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-active .vjs-progress-control,.video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-inactive .vjs-progress-control,.video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-active .vjs-progress-control,.video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-progress-control,.video-js.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-progress-control{height:.25em;top:-.25em;pointer-events:none;-webkit-transition:height 1s,top 1s;-moz-transition:height 1s,top 1s;-ms-transition:height 1s,top 1s;-o-transition:height 1s,top 1s;transition:height 1s,top 1s}.video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-active.vjs-fullscreen .vjs-progress-control,.video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-inactive.vjs-fullscreen .vjs-progress-control,.video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-active.vjs-fullscreen .vjs-progress-control,.video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-inactive.vjs-fullscreen .vjs-progress-control,.video-js.vjs-has-started.vjs-playing.vjs-user-inactive.vjs-fullscreen .vjs-progress-control{opacity:0;-webkit-transition:opacity 1s ease 1s;-moz-transition:opacity 1s ease 1s;-ms-transition:opacity 1s ease 1s;-o-transition:opacity 1s ease 1s;transition:opacity 1s ease 1s}.video-js.vjs-live .vjs-live-control{margin-left:1em}.video-js .vjs-big-play-button{top:50%;left:50%;margin-left:-1em;width:2em;border:none;color:#fff;-webkit-transition:border-color .4s,outline .4s,background-color .4s;-moz-transition:border-color .4s,outline .4s,background-color .4s;-ms-transition:border-color .4s,outline .4s,background-color .4s;-o-transition:border-color .4s,outline .4s,background-color .4s;transition:border-color .4s,outline .4s,background-color .4s;background-color:rgba(0,0,0,0);font-size:8em;border-radius:0%;height:1em!important;line-height:1em!important;margin-top:-.5em!important}.video-js .vjs-menu-button-popup .vjs-menu{left:-3em}.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-content{background-color:transparent;width:12em;left:-1.5em;padding-bottom:.5em}.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-item,.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-title{background-color:#151b17;margin:.3em 0;padding:.5em;border-radius:.3em}.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-item.vjs-selected{background-color:#2483d5}.video-js .vjs-big-play-button:active,.video-js .vjs-big-play-button:focus,.video-js:hover .vjs-big-play-button{background-color:rgba(0,0,0,0)}.video-js .vjs-loading-spinner{border-color:#b99beb}.video-js .vjs-control-bar2{background-color:#000}.video-js .vjs-control-bar{background-color:rgba(0,0,0,.4)!important;color:#fff;font-size:14px}.video-js .vjs-play-progress,.video-js .vjs-volume-level{background-color:#b99beb}.video-js .vjs-load-progress{background:rgba(255,255,255,.8)}.video-js .vjs-big-play-button:hover{color:#b99beb}.video-js .vjs-control:focus:before,.video-js .vjs-control:hover:before{color:#b99beb;text-shadow:none} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js-chromecast/2.0.9/videojs-chromecast.css" rel="stylesheet" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.5.0/video-js.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment