Question

我在我的网站上嵌入了以下视频：

<video id="vid" data-src="/tasks/render/file/?method=inline&fileID=#local.child.getVideoFile()#">
    <source src="/tasks/render/file/?method=inline&fileID=#local.child.getVideoFile()#" type="video/mp4">
    Your browser does not support the video tag.
</video>

哪个工作正常。我还将整件事包装在一个花哨的盒子里。这会在类似灯箱的叠加层中打开视频。这对桌面来说很好。

但是现在我的问题......有什么办法让我可以在移动设备（iPhone，Android，其他）的原生视频播放器中打开视频吗？

我搜索了HTML5视频JavaScript功能和HTML5视频HTML属性，但无法找到任何内容。

要启动视频，请使用此功能：

function play(vID) {
    document.getElementById('vid').play();
}

Answer 1

HTML5现在实际上有一个FullSscreen API - 它正在开发中，通常是新规格的情况，但我认为它在大多数最新版本的iOS和Android中都受支持。

规范本身就在这里：https://www.w3.org/TR/fullscreen/，它链接到最新的工作版本（查看名称奇怪的＆＃39;请参阅＃39}链接：https://fullscreen.spec.whatwg.org

这个Mozilla页面上有一些例子，虽然有需要更新的说明，所以值得你先尝试一下。

关键功能是JavaScript控制，使用文档中的视频元素。以上链接的一个例子是：

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
}

<video controls id="myvideo">
  <source src="somevideo.webm"></source>
  <source src="somevideo.mp4"></source>
</video>

如何在移动设备上播放原生播放器中的HTML5视频？

1 个答案: