javascript 移动设备上的 HTML5 视频行为

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9000624/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 05:17:11  来源:igfitidea点击:

HTML5 video behavior on mobile devices

javascripthtmlmobilehtml5-videomobile-webkit

提问by m90

I am building a site where I have several <video>elements (looped animations) that act as part of my design (not as an actual video). This works quite well in desktop browsers, yet I am in trouble on mobile devices.
When I display the site on Android or iOS devices (ie. mobile webkit) I will get the OS's video player appearance and the videos will open in some sort of popup when I click them. I do know that I can bypass the autoplay restrictions by doing sth like:

我正在构建一个网站,其中有几个<video>元素(循环动画)作为我设计的一部分(而不是实际视频)。这在桌面浏览器中非常有效,但我在移动设备上遇到了麻烦。
当我在 Android 或 iOS 设备(即移动 webkit)上显示网站时,我将获得操作系统的视频播放器外观,并且当我单击它们时,视频将在某种弹出窗口中打开。我知道我可以通过执行以下操作来绕过自动播放限制:

window.onload = function() {
    var pElement = document.getElementById("myVideo");
    pElement.load();
    pElement.play();
};

But this will again open the video(s) in a seperate window...

但这将再次在单独的窗口中打开视频......

Does anyone know of a possibility to emulate / enable desktop-like behavior on mobile devices? Thanks!

有谁知道在移动设备上模拟/启用类似桌面的行为的可能性吗?谢谢!

EDIT:Markup is basic <video>-syntax btw:

编辑:标记是基本的 -<video>语法顺便说一句:

<video autoplay loop>
    <source src="vid.mp4" type="video/mp4" />
    <source src="vid.ogg" type="video/ogg" />
    <source src="vid.webm" type="video/webm" />
</video>

采纳答案by j08691

Hmm, I'm not sure about Android but iOS devices can't run multiple video streams simultaneously:

嗯,我不确定 Android,但iOS 设备不能同时运行多个视频流

Multiple Simultaneous Audio or Video Streams

Currently, all devices running iOS are limited to playback of a single audio or video stream at any time. Playing more than one video—side by side, partly overlapping, or completely overlaid—is not currently supported on iOS devices. Playing multiple simultaneous audio streams is also not supported. You can change the audio or video source dynamically, however. See “Replacing a Media Source Sequentially” for details.

多个同步音频或视频流

目前,所有运行 iOS 的设备都仅限于随时播放单个音频或视频流。iOS 设备目前不支持播放多个视频(并排、部分重叠或完全重叠)。也不支持同时播放多个音频流。但是,您可以动态更改音频或视频源。有关详细信息,请参阅“按顺序更换媒体源”。

回答by Mustafa Amin

No, Android or iOS devices (ie. mobile webkit) are not able to run video as you are wanting . Video will open in a default video player of device.

不,Android 或 iOS 设备(即移动 webkit)无法如您所愿地运行视频。视频将在设备的默认视频播放器中打开。

回答by Blynn

YouTube uses a mov or mp4 with ios to load the native look and feel for videos, or it links out to their app to play the video since it's installed on every ios device.

YouTube 使用带有 ios 的 mov 或 mp4 来加载视频的本机外观,或者链接到他们的应用程序来播放视频,因为它安装在每个 ios 设备上。

回答by Chibueze Opata

Why do you need windows.onloadto bypass autoplay? If I remember correctly setting the preloadtag to none

为什么需要windows.onload绕过自动播放?如果我记得正确地将preload标签设置为无

<video src="vid.mov" preload=”none”></video>

should work.

应该管用。

Also, have you tried using the Video For Everybodyapproach? With that should be able to get the video to play in the web page rather than by the phone's OS, that way I believe you can achieve the same effect on supported devices.

另外,您是否尝试过使用适用于所有人视频方法?这样应该能够让视频在网页中播放,而不是通过手机的操作系统播放,这样我相信您可以在支持的设备上实现相同的效果。

EDIT:In regards to j08691's answer, an alternative approach for iPhones could be to design a simple web viewer app for the site for iPhone which has a workaroundfor the no-multiple video playing problem.

编辑:关于j08691 的回答,iPhone 的另一种方法可能是为 iPhone 网站设计一个简单的 Web 查看器应用程序,该应用程序具有解决无多个视频播放问题的方法。