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
class="contenedor">
<script type="text/javascript" src="https://embed-ssl.wistia.com/deliveries/9b0ed3b4fd7a2eb3049b51cd26b48b9c0300e7b9.bin?disposition=attachment&filename=jwplayer6.10.js"></script>
        <script type="text/javascript">jwplayer.key = "Q1Ft5yFT0nJBlCFnQAvJ7nC+uwr628IgJBzoCAnnn3tGVqUiRjtloYRetCh+EbI0";</script>
<div id="emergencycouplesatu"></div>
<script type="text/javascript">
    jwplayer("emergencycouplesatu").setup({
   playlist: [
<!--0001-->
       {sources: [
{file: "https://www.youtube.com/watch?v=az87rel5RRA"},
    
        { file: "" }],
image: "",
        title: "Workout Mix 2020 #58",
        
tracks: [{file: "",label: "spanish",kind: "captions","default": true},{file: "",label: "English",kind:                 "captions",}]}	      
    ],

autostart: true,
controls: true,
play: false,
  mute: false,
  stretching : "exactfit",
    events:{
        onBufferChange: function(callback) {
              //  console.log(callback.buffer);
               // console.log(jwplayer("emergencycouplesatu").getBuffer());
            }
        },
    width: 600,
	height: 500,
    listbar: {
      position: "right",
      size: 200,
    }
  });
</script>
</div>

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

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 emergencycouplesatu(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 =...