視頻播放HTML5時自動全屏切換
[英]Auto Full Screen Toggle When Video Plays HTML5
問題描述
我正在播放視頻片段，這是由於定時器在幾分鍾后被滴答而在定時器中播放的。
我想要的是無論何時開始播放視頻，它都應自動進入全屏模式，並在其停止時自動返回，因為視頻停止后，我會立即選中計時器。
我知道這個requestFullScreen（）方法，但是在視頻開始播放時我不知道如何調用它？
任何幫助將不勝感激！！
致謝，謝謝！
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
您是否正在尋找這樣的東西？
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
做這樣的事情：
<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>
自動播放不起作用
完成后重定向全屏自動播放HTML5視頻
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.