Html Video.js - 自动播放和循环在手机上不起作用
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/17536858/
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
Video.js - Autoplay and Loop not working on phone
提问by Lesik2008
I use this code to make a video (eg. banner, so no controls) autoplay and loop forever.
我使用此代码制作视频(例如横幅,因此没有控件)自动播放并永远循环播放。
<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>
It works fine on my computer but on my phone (Android OS 4.2.2 with Chrome) it's not autoplaying or preloading and not looping after it finished.
它在我的电脑上运行良好,但在我的手机上(Android OS 4.2.2 with Chrome)它不会自动播放或预加载,也不会在完成后循环。
I read this on Video.js page:
我在 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'.
自动:立即开始加载视频(如果浏览器同意)。某些移动设备(如 iPhone 和 iPad)不会预加载视频以保护用户的带宽。这就是为什么该值被称为“自动”而不是像“真”这样的更最终的东西。
I set the preload to true but it still doesn't autoplay or loop.
我将预加载设置为 true 但它仍然不会自动播放或循环播放。
Is that a feature of my browser and how can I avoid that?
这是我的浏览器的一个功能,我该如何避免?
I tried on other browsers:
我在其他浏览器上试过:
- UC Browser doesn't seem to support HTML5 at all?
- Stock browser shows a little video icon but doesn't show the player, too
- ↑ Same with Maxthon ↑
- UC 浏览器似乎根本不支持 HTML5?
- 股票浏览器显示一个小视频图标,但也不显示播放器
- ↑ 与傲游相同 ↑
采纳答案by Andrew Junior Howard
On a phone, there's no way you can get it to loop or preload data. But I do have a solution where you could autoplay it. You could use my code here = http://www.andy-howard.com/recreate-bbc-iplayer/index.html
在手机上,您无法让它循环或预加载数据。但我确实有一个解决方案,您可以自动播放它。你可以在这里使用我的代码 = http://www.andy-howard.com/recreate-bbc-iplayer/index.html
And simply add an addition click function on the document ready. This would then make the browser on the phone click the image, which then in turn converts the data tags to video tags, which then converts to the videojs player, which then plays :)
只需在准备好的文档上添加额外的点击功能。这将使手机上的浏览器单击图像,然后将数据标记转换为视频标记,然后转换为 videojs 播放器,然后播放:)
Hope that's helpful.
希望这有帮助。
回答by andrewtweber
To solve the autoplay issue on iOS, do not use the videojs optionsto autoplay the video.
要解决 iOS 上的自动播放问题,请不要使用 videojs选项来自动播放视频。
In other words, this will not work:
换句话说,这行不通:
<video id="my-video-id" autoplay></video>
Neither will this:
这也不会:
videojs('my-video-id', {
"autoplay": true
});
Instead wait for the video object to load and then trigger the play action:
而是等待视频对象加载,然后触发播放动作:
videojs('my-video-id').ready(function() {
this.play();
});
回答by srgbnd
On mobile, you can autoplay if you put muted
option
在移动设备上,如果您设置muted
选项,则可以自动播放
<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
Chrome v53:https: //developers.google.com/web/updates/2016/07/autoplay
iOS 10 : https://webkit.org/blog/6784/new-video-policies-for-ios
iOS 10:https: //webkit.org/blog/6784/new-video-policies-for-ios
回答by Phong Nam
I have to do that automatically.
我必须自动做到这一点。
<p>
<span>
<script src="https://ssl.p.jwpcdn.com/player/v/8.1.3/jwplayer.js"></script>
<script type="text/javascript">jwplayer.key = "W7zSm81+mmIsg7F+fyHRKhF3ggLkTqtGMhvI92kbqf/ysE99";</script>
</p>
<div id="myElement"> </div>
<div id="mediaplayer"> </div>
<p>
<script type="text/javascript">jwplayer("mediaplayer").setup({"file": "https://daga588.us/hls/xemdaga.m3u8",width: "100%",height: "100%",aspectratio: "16:9",autostart: false,position: "top-left",},);</script>
</span>
</p>
Demo: https://sv388.top/
演示:https: //sv388.top/