关于html:Video.js-自动播放和循环无法在手机上运行

Video.js - Autoplay and Loop not working on phone

我使用此代码使视频(例如横幅广告,因此没有控件)永远自动播放并循环播放。

1
2
3
4
5
6
7
8
9
10
<video id="video1" class="video-js vjs-default-skin"
      controls width="900" height="500"
      poster="myposter.jpg"
      data-setup='{
       "controls": false,
       "loop":"true",
       "autoplay": true,
       "preload":"true"}'>
         <source src="thisismyvideoyay.webm" type='video/webm' />
    </video>

它可以在我的计算机上正常工作,但在我的手机(带有Chrome的Android OS 4.2.2)上,它不会自动播放或预加载,并且在完成后不会循环播放。

我在Video.js页面上阅读了此内容:

Auto: Start loading the video immediately (if the browser agrees). Some
mobile devices like iPhones and iPads will not preload the video in
order to protect their users' bandwidth. This is why the value is
called 'auto' and not something more final like 'true'.

我将预加载设置为true,但是仍然无法自动播放或循环播放。

这是我的浏览器的功能,如何避免呢?

我在其他浏览器上尝试过:

  • UC Browser似乎根本不支持HTML5?
  • 股票浏览器显示了一个小视频图标,但也未显示播放器
  • ↑与傲游同样↑


要解决iOS上的自动播放问题,请不要使用videojs选项自动播放视频。

换句话说,这将不起作用:

1
<video id="my-video-id" autoplay></video>

这也不会:

1
2
3
videojs('my-video-id', {
   "autoplay": true
});

代替等待视频对象加载,然后触发播放操作:

1
2
3
videojs('my-video-id').ready(function() {
    this.play();
});


在电话上,您无法让它循环或预加载数据。但是我有一个可以自动播放的解决方案。您可以在这里使用我的代码= http://www.andy-howard.com/recreate-bbc-iplayer/index.html

然后只需在准备好的文档上添加附加单击功能即可。然后,这将使手机上的浏览器单击图像,然后将图像标签转换为视频标签,然后将其转换为videojs播放器,然后播放:)

希望有帮助。


在移动设备上,如果放置muted选项

,则可以自动播放

1
2
3
4
<video autoplay muted>
  <source src="video.webm" type="video/webm" />
  <source src="video.mp4" type="video/mp4" />
</video>

Chrome v53:https://developers.google.com/web/updates/2016/07/autoplay

iOS 10:https://webkit.org/blog/6784/new-video-policies-for-ios


这对我有用,在视频代码上使用它

data-setup = \\'{" controls ":false," autoplay ":true," preload ":" auto "," loop ":true} \\'