Question

我有一个视频片段，这是因为定时器在几分钟后得到滴答声时会在定时器中播放。

我想要的是每当视频开始播放时它应该自动进入全屏模式并且当它停止时，然而它会回到位置，因为一旦视频停止我就有计时器被勾选。

我知道这个requestFullScreen（）方法，但我不知道在视频开始播放时如何调用它？

任何帮助将不胜感激!!

问候并谢谢！

Answer 1

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

Answer 2

你在找这样的东西吗？

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

Answer 3

做这样的事情：

<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时自动全屏切换

3 个答案: