Open a HTML5 video in fullscreen by default? - html

Question

I wish to host some HTML5 videos in a HTML app. On opening the video they currently just open up within a page and play by default with the controls available with the option to open fullscreen, is there any way to get playing full screen as soon as you open the page?
<div class="video-container" data-tap-disable="true">
<div class="videotitle">{{product.title}}</div>
<div class="videoduration">Duration: {{product.duration}}</div>
<video id="myVideo" controls="controls" preload="metadata" autoplay="autoplay" webkit-playsinline="webkit-playsinline" class="videoPlayer"><source src="{{product.video}}" type="video/mp4"/></video>
Here is my Angular controller, I assume the JS code will fit in here somewhere as opposed to my product.html
.controller('ProductCtrl', function (Products, $rootScope, $scope, $stateParams, $state, $timeout) {
$scope.product = Products[$stateParams.productId];
var video = document.getElementById("myVideo");
// Stop video playing when we go to another page
$rootScope.$on('$stateChangeStart', function () {
stopVideo();
});
// Go to list of other videos when individual HTML5 video has finished playing
angular.element(video).bind('ended', function () {
$state.go('app.products');
});
function stopVideo() {
video.pause();
video.currentTime = 0;
}
});

Answer 1

const elem = document.getElementById("myVideo");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}

Answer 2

var video = $("#myVideo");
video.on('click', function(e){
var vid = video[0];
vid.play();
if (vid.requestFullscreen) {
vid.requestFullscreen();
} else if (vid.mozRequestFullScreen) {
vid.mozRequestFullScreen();
} else if (vid.webkitRequestFullscreen) {
vid.webkitRequestFullscreen();
}
});