html自动全屏播放图片,视频播放HTML5时自动全屏切换(Auto Full Screen Toggle When Video Plays HTML5)...

视频播放HTML5时自动全屏切换(Auto Full Screen Toggle When Video Plays HTML5)

我有一个视频剪辑，当定时器在几分钟后得到滴答声时，它会在定时器中播放。

我想要的是每当视频开始播放它应该自动进入全屏模式，当它停止时，然后回到位置，因为一旦视频停止我有计时器滴答。

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

任何帮助将不胜感激！！

问候和谢谢！

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?

Any Help will be appreciated!!

Regards and Thanks!

原文：https://stackoverflow.com/questions/26137581

更新时间：2019-11-30 04:22

最满意答案

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

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

相关问答

这应该工作，用简单的Javascript： var myVideo = document.getElementById('myVideoTag');

myVideo.play();

if (typeof(myVideo.webkitEnterFullscreen) != "undefined") {

// This is for Android Stock.

myVideo.webkitEnterFullscreen();

} else if (typeof(myVideo.we

...

在script标记中，使用type=而不是src= 。 从其他位置引用javascript文件时应使用src 。 此外，您应该在“addEventListener”行后面加一个分号。

video = document.getElementById('myvid');

video.addEventListener('ended',function() {

alert('video is ended');

...

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

var video = docu

...

从您提供的链接中缺少background属性，这些属性将显示静态背景图像，以防视频无法加载并cover整个页面。 你必须改变你的position: absolute到position:fixed否则会产生溢出 请参阅下面的工作代码段： 片段 #bg {

position: fixed;

top: 50%;

left: 50%;

min-width: 100%;

min-height: 100%;

width: auto;

he

...

我可以解决这个问题： //fixing the bug in android that stretch video on load

function fix_stretch_video(){

var check_interval = setInterval(function(){

$('.pl-loading-btn').css('display', 'block');

if (player.videoWidth != 0) {

...

我对此问题感到恐慌，直到我发现“弹出窗口”中包含的而不是常规窗口/标签会导致标签在其控件中删除全屏按钮。 我的“页面预览”恰好在弹出窗口中启动，并且最大化了这一点，在得出结论是弹出窗口与普通窗口/标签问题之前，我花了一些时间来消除各种因素。 我遇到的行为是在Chrome中。 我还没有尝试过其他浏览器。 另外：另外，请注意，在IFRAME中也表现出相同的方式，也放弃了全屏按钮(从评论中)。 I figured this out, it was at least half

...

既然我理解了您的目标，但由于安全风险，您无法以全屏模式监听按键事件，因此可以在Chrome中启用此功能，但我强烈建议您不要这样做。 你可以做的是，你可以听webkitfullscreenchange mozfullscreenchange fullscreenchange事件(为了浏览器兼容性的原因多个事件)。 然后在发生这些事件时行动。 $(document).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange',

...

这应该工作： 使用带有autoplay属性的1个视频标签创建一个空的html页面 然后使用JavaScript创建一个包含您要播放的视频的所有路径的数组 将函数附加到视频标记的“已结束”事件 函数内部生成一个随机索引Math.floor(Math.random() * clipPaths.length); 使用生成的索引从数组中获取随机路径 将路径设置为视频标记的“src”属性 你只需要将所有路径放在clipPaths数组中......

...

您可以使用webkitEnterFullscreen()方法。 var vid;

function init() {

vid = document.getElementById("myVideo");

vid.addEventListener("loadedmetadata", addFullscreenButton, false);

}

function addFullscreenButton() {

i

...

我不确定我是否完全符合您的要求，但听起来您正在寻找具有值cover的object-fit属性。 来自mdn： 盖 替换内容的大小可以在填充元素的整个内容框时保持其宽高比：其具体对象大小被解析为对元素的使用宽度和高度的封面约束。 html,

body,

div.video-container,

video

{

height: 100%;

width: 100%;

margin: 0;

padding: 0;

box-sizing: border-box;

}

...