6

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

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

4

5 回答 5

6

这应该可以使用纯 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 进行测试。

于 2014-06-25T08:17:29.673 回答
2

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

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

于 2012-08-04T19:41:08.523 回答
1

你检查过mediaelement.js吗？

于 2012-07-10T19:08:51.043 回答
0

尝试以下方式：

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

webkitEnterFullscreenVIDEO是当前在 iOS 上运行的元素的全屏方法。我不确定对 Android 设备的支持。

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

希望这至少可以为您提供一个开始工作的起点...

于 2012-07-10T19:36:10.107 回答
0

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

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

或者

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

注意我是如何用[0]. 否则它不起作用。

于 2014-03-26T00:20:15.163 回答