[英]Open a HTML5 video in fullscreen by default?
我希望在 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;
}
});
const elem = document.getElementById("myVideo");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
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();
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.