默认情况下在全屏模式下打开HTML5视频？

Question

我希望在一个HTML应用程序中托管一些HTML5视频。目前，打开视频时它们只会在页面内打开并默认播放，控件可用，并提供全屏选项，是否有任何方法可以在打开页面时立即全屏播放？

<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>

这是我的Angular控制器，我假设JS代码将适合在这里而不是在我的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;
}
});

- me9867

---

可能是Html5全屏视频的重复问题。 - Erazihel

请查看videogular。 - Alon Eitan

Answer 1

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

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

- AnatPort

---

虽然这段代码可能回答了问题，但提供关于为什么和/或如何回答问题的额外背景信息可以提高其长期价值。 - Ajean

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

- MERT DOĞAN

---

这不是AngularJS的答案（但是它通常是正确的答案），OP应该在指令中使用它，保持他们的控制器不涉及DOM操作代码。 - Alon Eitan

不错的复制粘贴，虽然是重复的。 - Erazihel

你的代码中有 WebKit 和 Moz 的回退，但这是否适用于 Android 应用程序呢？此外，此代码仅在点击时启用，而非页面打开时。 - me9867

抱歉回复晚了。没有办法自动打开全屏视频，这是关于客户端安全的问题。这是播放全屏视频的其中一个可能的解决方案，您可以根据自己的需求进行编辑。 - MERT DOĞAN