移动设备上的 HTML5 视频行为

发布于 2024-12-28 15:12:14 字数 744 浏览 5 评论 0原文

我正在构建一个网站，其中有多个元素（循环动画），它们充当我的设计的一部分（而不是实际的视频）。这在桌面浏览器中工作得很好，但我在移动设备上遇到了麻烦。
当我在 Android 或 iOS 设备（即移动 webkit）上显示网站时，我将看到操作系统的视频播放器外观，并且视频将在当我点击它们时会出现某种弹出窗口。我确实知道我可以通过执行以下操作来绕过自动播放限制：

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

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

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

编辑： 标记是基本的 -顺便说一句：

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

原文

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:

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 autoplay loop>
    <source src="vid.mp4" type="video/mp4" />
    <source src="vid.ogg" type="video/ogg" />
    <source src="vid.webm" type="video/webm" />
</video>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不必你懂 2025-01-04 15:12:15

不可以，Android 或 iOS 设备（即移动 webkit）无法按照您的意愿运行视频。视频将在设备的默认视频播放器中打开。

回复收藏 0 原文

許願樹丅啲祈禱 2025-01-04 15:12:15

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

回复收藏 0 原文

厌味 2025-01-04 15:12:15

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

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

应该可以工作。

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

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

Why do you need windows.onload to bypass autoplay? If I remember correctly setting the preload tag to none

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

should work.

Also, have you tried using the Video For Everybody approach? 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 workaround for the no-multiple video playing problem.

回复收藏 0 原文