html5视频标签与Android全屏播放

Posted 2023-05-07

【中文标题】html5视频标签与Android全屏播放

【英文标题】：html5 video tag to play full screen with Android

【发布时间】：2012-07-10 01:33:39

【问题描述】：

我正在创建一个移动网站，其中有一个视频我想在有人点击链接时播放：

<div id="player"></div>
<a href="#" onclick="DoNav('<?php echo $url; ?>');" title="Click to play video"> <?php echo $result_videos[$i]["camera_name"]; ?> </a>

<script type="text/javascript">
function DoNav(theUrl)


  // only add the player if it doesn't yet exist
  if($('#myfileplayer').length == 0) 
    var mydiv = $("#player");
    var myvideo = $("<video id='myfileplayer' src='"+ theUrl + "' width='320' height='240' controls></video>");
    mydiv.append(myvideo);
   else 
    $('#myfileplayer').attr("src",theUrl); 
  

 
</script>

使用 iPhone，效果很好，我点击视频，它就会全屏显示。 android 也可以，但它需要您单击视频播放，然后单击全屏。是否可以像 iPhone 一样在点击播放时进入全屏模式？

【问题讨论】：

它在android上有什么作用？

点击播放后，它会保持我使用高度/宽度参数指定的播放器大小（我需要这些参数，以便您可以返回相同的视频）。您可以再次单击以从控件中进入全屏状态，但我希望能像 iPhone 一样立即进入全屏状态。

浏览器安全模型不允许您在“播放”或“播放”事件上全屏显示。您必须使用“点击”。然而，并不是所有的点击事件都会导致视频的播放。因此，在单击处理程序中，您要检查 video_tag.paused===false 并调用 video_tag.webkitRequestFullScreen()

【参考方案1】：

这应该可以使用纯 Javascript：

var myVideo = document.getElementById('myVideoTag');

myVideo.play();
if (typeof(myVideo.webkitEnterFullscreen) != "undefined") 
    // This is for Android Stock.
    myVideo.webkitEnterFullscreen();
 else if (typeof(myVideo.webkitRequestFullscreen)  != "undefined") 
    // This is for Chrome.
    myVideo.webkitRequestFullscreen();
 else if (typeof(myVideo.mozRequestFullScreen)  != "undefined") 
    myVideo.mozRequestFullScreen();

你必须在全屏指令之前触发 play() ，否则在 Android 浏览器中它只会全屏但不会开始播放。 已使用最新版本的 Android 浏览器、Chrome、Safari 进行测试。

【参考方案2】：

我已经放弃了。我的结论是，Android 设备上的 html5 视频标签会大打折扣。它适用于某些设备，但不适用于其他设备。并且没有像 3.x 或 4.x 这样的通用标准，它似乎只是随机的。我希望这种情况很快会好转，尤其是因为闪存支持不再存在。

奇怪地坚持简单的href 似乎是最一致的。你失去了一些控制，但比视频标签好得多……至少到目前为止。

【讨论】：

这篇文章支持你的结论：***.com/questions/15768837/…

【参考方案3】：

你检查过mediaelement.js吗？

【讨论】：

我已经检查过了，它甚至在 Android Kitkat 4.4 上也不起作用

【参考方案4】：

尝试以下方式：

document.getElementById('myfileplayer').addEventListener('play', function (e)  this.mozRequestFullScreen ? this.mozRequestFullScreen() : this.webkitRequestFullScreen ? this.webkitRequestFullScreen() : null; , false);

要么这样，要么可能类似于：

document.getElementById('myfileplayer').addEventListener('play', function (e)  this.webkitEnterFullscreen(); , false);

webkitEnterFullscreen 是当前在 ios 上运行的 VIDEO 元素的全屏方法。我不确定是否支持 Android 设备。

mozRequestFullScreen 和 webkitRequestFullScreen 是 Mozilla 和 Google 的 FullScreen API 的实现，用于激活几乎任何 DOM 元素的全屏模式。

希望这至少能给你一个工作的起点......

【讨论】：

谢谢。这看起来像是要开始的事情。我对您发布的内容进行了快速尝试，但没有成功，看来我还有一些研究要做。

【参考方案5】：

大多数供应商要求用户交互全屏，这就是为什么 natalee 的答案不起作用。对于 Andriod，您可以在锚点的点击处理程序中调用 webkitEnterFullScreen()，因为它是有效的用户交互：

    myvideo[0].webkitEnterFullScreen();
    myvideo[0].play();

或

    $('#myfileplayer')[0].webkitEnterFullScreen();
    $('#myfileplayer')[0].play();

注意我是如何用[0] 剥离 jQuery 的包装器的。否则它不起作用。