Videojs 6 - Load Video Dynamically with the right TYPE

Videojs 6 - Load Video Dynamically with the right TYPE

by enagu

HTML

<script src="https://vjs.zencdn.net/6.2/video.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/videojs-contrib-hls/5.12.2/videojs-contrib-hls.min.js"></script>
<script src="https://cdn.rawgit.com/videojs/videojs-youtube/master/src/Youtube.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dashjs/2.4.1/dash.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-dash/2.8.1/videojs-dash.min.js"></script>
<link rel="stylesheet" href="https://vjs.zencdn.net/6.2/video-js.css">
<script src="https://skylgenet.nl/videojs-flash.min.js"></script>
<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", "flash", "youtube"], "sources": [{ "type": "application/x-mpegURL", "src": "blob:https://booyah.live/6dd5378b-5af5-4afd-81f0-3590967a92bd"}]}'></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="http://jplayer.org/video/m4v/Incredibles_Teaser.m4v">Play .M4V</a></li>
    <li><a id="myLink" title="Click video"...

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');
/* 
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 =...