Question

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

<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一样进入全屏？

Answer 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。

Answer 2

我放弃了这一点。我的结论是，Android设备上的html5视频标签会破坏大块。它适用于某些设备但不适用于其他设备。并且没有像3.x或4.x这样的常见标准，它似乎是随机的。我希望这会很快好转，特别是因为闪存支持不再存在。

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

Answer 3

你签出了mediaelement.js吗？

Answer 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元素上激活全屏模式。

希望这至少可以为你提供一个起点......

Answer 5

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

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

或

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

请注意我是如何使用[0]删除jQuery的包装器。它不会起作用。

html5视频标签可与Android全屏播放

5 个答案: