在手机上使用外部链接自动播放html5视频 [英] autoplay html5 video with external link on mobiles

问题描述

我创建了一个自动播放全屏幕背景视频的网页。

I have created a web page that auto plays a full screen background video.

视频顶部是一个包含文字&指向外部网站的链接 - 这适用于所有桌面浏览器。

On top of the video is a div that contains text & a link to an external site - this works fine in all desktop browsers.

如何在移动设备上重新创建相同的设置 - 我是否需要使用javascript要实现这个目标吗？

How do i recreate the same setup to play on mobile devices - would I need to use javascript in order to achieve this?

我花了很多时间在google上搜索确定的答案，现在我很困惑。

I have spent many hours trawling google for a definitive answer and am now very confused.

提前致谢。

推荐答案

iOS或Android等移动设备上不允许自动播放HTML5视频。你可以阅读这个对于iOS上的原因和方法。

Autoplay for HTML5 video is not allowed on mobile devices such as iOS or Android. You can read this for the whys and hows on iOS.

在iPhone上，视频在默认（全屏）Quicktime播放器中播放。因此没有真正的背景概念（这可以在本机应用程序中完成，其中允许视频的内联播放但不允许在Safari / Web浏览器中）。你需要坚持使用我想的图像。

On iPhone the video plays in the default (fullscreen) Quicktime player. So there is no real background notion (this could be accomplished in a native app where inline playback of video is allowed but not in the Safari/web browser). You would need to stick to an image I guess.

在iPad或Android上为了达到你想要的效果，你需要将视频标签绑定到触摸屏上事件/按钮（例如当用户触摸进入您的网站时），并且在此事件上启动视频的播放顺序（在您的情况下，视频被设置为占据视口的整个宽度和高度）。

On the iPad or on Android in order to accomplish what you want you will need to bind your video tag to a touch event/button (like when a user 'touch' to enter your site), and on this event initiate the play sequence for the video (in your case the video being set to occupy the full width and height of the viewport).

谢谢

这篇关于在手机上使用外部链接自动播放html5视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！