Videojs 5 - Load Video Dynamically

Videojs 5 - Load Video Dynamically

by fredd man

HTML

<script src="https://vjs.zencdn.net/5.11.9/video.js"></script>
<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
<script src="https://cdn.rawgit.com/videojs/videojs-youtube/master/src/Youtube.js"></script>
<link rel="stylesheet" href="https://vjs.zencdn.net/5.11.9/video-js.css">
<div id="instructions">
  <video id="vid1" class="video-js vjs-default-skin vjs-fluid" controls width="640" height="264"></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>


</div>

CSS

#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;
  }

JavaScript

/* 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', {
  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;
//});

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) {

  if (ytVidId(vidURL) !== false) {
    ext = "youtube"
    console.log('Youtube');

    // alert(getId(vidURL)) // Youtube video ID
    //var yvID = getId(vidURL);
    //vidURL = "https://www.youtube.com/watch?v="+yvID;

  } else {

    //$("#vid1 iframe, #vid1 .vjs-iframe-blocker").remove();

    if (!ext) ext = "mp4";
    var ext = vidURL.split('.').pop();
  }

  console.log(ext);

  vgsPlayer.src({
    //"techOrder": ['youtube'],
    "type": "video/" + ext,
    "src": vidURL
		//"youtube": { "iv_load_policy": 3 }
  });
  if (poster) vgsPlayer.poster(poster);
  vgsPlayer.play();

}


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=)([^#\&\?]*).*/;
  return (url.match(p)) ? RegExp.$1 : false;
}

/**/
function getId(url) {
  var regExp =...