Open a HTML5 video in fullscreen by default?

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;
}
});

Possible duplicate of [Html5 Full screen video](http://stackoverflow.com/questions/6039909/html5-full-screen-video) — Erazihel, Mar 21 '16 at 15:27

score 3 · Answer 1 · edited Nov 19 '19 at 09:55

3

const elem = document.getElementById("myVideo");

if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

edited Nov 19 '19 at 09:55

Kenth John Israel

1,303
1
13
23

answered Mar 21 '16 at 15:37

AnatPort

748
8
20

4

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. – Ajean Mar 21 '16 at 16:28

score 0 · Answer 2 · answered Mar 21 '16 at 15:30

0

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();
    }
});

answered Mar 21 '16 at 15:30

MERT DOĞAN

2,864
26
28

This is not an angularJS answer (But it is the answer in general), the OP should use it inside a directive and keep their controller clean of DOM manipulation code – Alon Eitan Mar 21 '16 at 15:33
Nice copy paste of the duplicate though. – Erazihel Mar 21 '16 at 15:46
There is webkit and moz fallbacks in your code, would this work in Android in an App though. Also this code is click enabled and not when the page is opened. – me9867 Mar 21 '16 at 15:51
Exquise me for late response. There is no way for open fullscreen video automatically. This is about client security. This is one of possible solution you can find for play videos in fullscreen. You can edit it for your needs. – MERT DOĞAN Mar 22 '16 at 13:55

Open a HTML5 video in fullscreen by default?

2 Answers2