Video controls on Video.js appear only with HTML5

Question

I am using Video.js to display some short videos. My first page that used Video.js looked like the following:

  <video id='my-video' class='video-js' controls preload='auto' width='800' height='600' poster='MY_VIDEO_POSTER.jpg' data-setup='{}'>
    <source src='example.mp4' type="video/mp4">
  </video>

When playing this video, using the code above, I see a pause/play button (it toggles between pause and play), a mute sound button, and a progress bar whenever I move the mouse over the player window.

I began learning how to do this in Javascript because I wanted to be able to pass a function the name of a video and have it play that video when clicking the button. The altered HTML is below:

  <button type="button" onclick="playit('example.mp4')">Press Me</button>
  <video id='my-video' class='video-js' width='800' height='600' poster='MY_VIDEO_POSTER.jpg'>
  </video>

The Javascript I am using to play the video is below:

var playit = function(vName) {

   var options = {
       sources: [{
          src: vName,
          type: "video/mp4"
       }],
       preload: "auto",
       controls: true,
       autoplay: true
   };

   var play = videojs("my-video",options,function onPlayerReady() {
       this.play();
   });
}

The Javascript works well, but the resulting playing video only shows the progress bar! The play/pause and mute are gone.

Is there something I need to set in the options object that will make those controls appear? How do I get the pause/play and mute controls back using Javascript?

Also: it would be nice to have a real volume control and fullscreen control available. I know these exist in the View.js control, and the fullscreen control appears when using the HTML- only video, but it is unclear from the documentation how to make either of them appear when using Javascript.

Can someone tell me how to make them available as well?

I

score 0 · Answer 1 · answered Sep 24 '19 at 12:55

In your first example above you have the attribute 'controls' in the HTML5 video tag - this is what tells the browser to include the controls.

This is missing in your second example - i.e. you do not have the 'controls' attribute in the HTML5 video tag. You do have it in the Javascript but my experience is it is easiest to add it in the HTML5 and then control the behaviour and what you do and don't want to appear via the Javascript - see this example:

let player = videojs('testVid', {
  controlBar: {
    volumePanel: {
      inline: false
    }
  }
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
<link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
</head>
<body>

<video id="testVid" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" 
      data-setup='{}'>
    <source src="http://ftp.nluug.nl/pub/graphics/blender/demo/movies/ToS/tears_of_steel_720p.mov" type='video/mp4'>
  </video>

</body>
</html>

It's worth being aware that this has changed over time in video.js but this page is generally kept up to date (at the time of writing): https://docs.videojs.com/tutorial-components.html#default-component-tree

Video controls on Video.js appear only with HTML5

1 Answers1