视频播放HTML5时自动全屏切换
[英]Auto Full Screen Toggle When Video Plays HTML5
问题描述
I am having video clip which is due to play in Timer when Timer gets tick after few minutes. 
我正在播放视频片段，这是由于定时器在几分钟后被滴答而在定时器中播放的。
What I want is whenever the video starts playing it should automatically go into FullScreen mode and when it stops it, however comes back to position because as soon as Video stops I have Timer Ticked. 我想要的是无论何时开始播放视频，它都应自动进入全屏模式，并在其停止时自动返回，因为视频停止后，我会立即选中计时器。
I know this requestFullScreen() method but I don't know how to call it when video starts playing? 我知道这个requestFullScreen（）方法，但是在视频开始播放时我不知道如何调用它？
Any Help will be appreciated!! 任何帮助将不胜感激！！
Regards and Thanks! 致谢，谢谢！
3 个解决方案
解决方案1
0 已采纳 2014-10-01 09:00:23
var video = document.createElement('video');
video.src = 'urlToVideo.ogg';
video.style.width = window.innerWidth;
video.style.height = window.innerHeight;
video.autoPlay = true;
document.getElementById('video2').appendChild(video);
解决方案2
0 2014-10-01 09:18:54
Are you looking for something like this? 您是否正在寻找这样的东西？
video = document.getElementById('video');
function onTick(){
video.play();
}
video.onPlay = function() {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.msRequestFullscreen) {
video.msRequestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen();
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen();
}
};
video.onended = function(e) {
if(video.exitFullscreen) {
video.exitFullscreen();
} else if(video.mozCancelFullScreen) {
video.mozCancelFullScreen();
} else if(video.webkitExitFullscreen) {
video.webkitExitFullscreen();
}
};
解决方案3
0 2014-10-01 09:51:41
Do something like this : 做这样的事情：
<script>
window.onload = function(){
var el = document.getElementById("OnTick");
el.addEventListener("click", function(){
el.style.display = 'none';
var videoContener = document.getElementById('video2');
var video = document.createElement('video');
videoContener.style.width = window.innerWidth;
videoContener.style.height = window.innerHeight;
video.src = 'http://techslides.com/demos/sample-videos/small.ogv';
video.style.width = "100%";
video.autoPlay = true;
video.controls = true;
videoContener.appendChild(video);
}, false);
}
</script>
<body style='margin:0px'>
<div id='video2' style='overflow: hidden;'></div>
<span id='OnTick' style='width:20px;height:20px;background-color:#323232;display:block'> </span>
</body>
autoplay doesn't work 自动播放不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.