[SOLVED] How to autoplay video and fullscreen with one click in video.js?

How to autoplay video and fullscreen with one click in video.js?

i want to show a list of thumbnails, when clicked a thumbnail i want the video of the thumbnail to get displayed directly in fullscreen and autoplay.

I was thinking about firing the play and fullscreen function when clicking a link/button/image but i was not able to find the related functions/actions for the buttons.

Because of i have more than one video on the site seems like i have to loop through all to enable function to all videos? The Documentation scripts always needed a dependency to a specific video-object, was not able to find a way to create a function as global presetting for all videos.

Solution

This is very easy just set this javasricpt method onclick of video thumbnail. Here is code snippet.

function playVideo(){
  var elem = document.getElementsByTagName('video')[0];
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  }else if (elem.mozRequestFullScreen) {
    elem.mozRequestFullScreen();
  }else if (elem.webkitRequestFullscreen) {
    elem.webkitRequestFullscreen();
  }else if (elem.msRequestFullscreen) { 
    elem.msRequestFullscreen();
  }else{
    alert("Full screen not supported");
    return;
  }
  elem.play();
}

<html>
<body>
<button onclick="playVideo();">Click me!</button>
<video controls>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">
</video>
</body>
</html>

This doesn't works in stackoverflow snippet but works in normal browsers.