默认情况下以全屏模式打开HTML5视频?

问题描述:

我希望在HTML应用中托管一些HTML5视频。在打开视频时,他们目前只是在一个页面中打开,默认情况下播放的控件可以打开全屏选项,您是否可以在打开页面后立即播放全屏?默认情况下以全屏模式打开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> 

这里是我的角度控制,我认为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; 
} 
}); 
+0

[Html5的全屏幕视频的可能的复制](http://*.com/questions/6039909/html5-full-screen-video) – Erazihel

+0

看看[视频](http://www.videogular.com/) –

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

这不是一个angularJS答案(但这是一般的答案),O P应该在指令中使用它,并保持它们的控制器清理DOM操作代码 –

+0

好的复制粘贴虽然复制。 – Erazihel

+0

在你的代码中有webkit和moz的后备,这是否会在Android的应用程序中工作。此外,此代码是单击启用,而不是当页面打开时。 – me9867

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

尽管这段代码可能会回答这个问题,但提供关于此代码为什么和/或如何回答问题的其他上下文会提高其长期价值。 – Ajean