Videojs 5 - Load Video

Videojs 5 - Load Video

by Ea Bangalore

HTML

<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
<link rel="stylesheet" href="//vjs.zencdn.net/5.4.6/video-js.min.css">
<script src="https://cdn.rawgit.com/videojs/videojs-youtube/master/src/Youtube.js"></script>
<div id="instructions">

  <video id="vid1" class="video-js vjs-audio vjs-default-skin vjs-fluid" controls width="640" height="264" data-setup='{ "sources": [{ "type": "audio/mp3", "src": "http://www.sample-videos.com/audio/mp3/crowd-cheering.mp3"}], "aspectRatio": "1:0",  "fluid": true,"controlBar": {"fullscreenToggle": false} }'>
  </video>

</div>

CSS

#instructions {
    max-width: 640px;
    text-align: left;
    margin: 150px 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 {
    text-align: center;
    color: #aaa;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  
  a,
  a:hover,
  a:visited {
    color: #76DAFF;
  }
  
  .video-js.vjs-audio .vjs-big-play-button {
  display: none;
}
/* Audio: Make the controlbar visible by default */
.video-js.vjs-audio .vjs-control-bar {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
/* Make player height minimum to the controls height so when we hide video/poster area the controls are displayed correctly. */
.video-js.vjs-audio {
  min-height: 3em;
}

JavaScript

/* VIDEOJS */
// declare object for video
var myPlayer, changeVideo;
videojs("vid1").ready(function() {
  myPlayer = this;
  
  myPlayer.on('timeupdate',function(){
   console.log('this.currentTime()',this.currentTime());
});
});


jQuery(document).ready(function($) {


});