首页 文章

移动浏览器上的HTML5视频自动播放

提问于
浏览 次
27

我正在使用以下HTML5和JQuery代码来播放其URL位于数组URLArray []中的视频的播放列表 .

function NextFrag(){

 if (index < URLArray.length)
 {
   $("#VideoContainer").html('<video  id="video1" controls autoplay width="95%"> "<source src= "'+ URLArray[index]+ '" type="video/mp4"></source> </video>' );
   index++;
   $("#video1").bind( "ended", NextFrag);
 }
}

我们知道所有手机都禁用了HTML5的自动播放功能，因此我必须在手机上手动播放每个视频片段 . 这绝对是我不想要的 .

我真的想知道替代方案 . 我真的很感兴趣的代码段，我可以包括自动播放，而不涉及用户进行交互 .

是否可以将其转换为Android应用程序 . 我真的需要让它像播放列表一样工作，我不关心如何，我只需要这个功能 .

请帮忙 .

jquery html5 html5-video

5 回答

  • 2

    自从iOS 10发布以来，Apple已经允许静音视频自动播放：https://webkit.org/blog/6784/new-video-policies-for-ios/

    Android上的Chrome 53也允许静音视频自动播放：https://developers.google.com/web/updates/2016/07/autoplay

    回复于
  • 35

    UPDATE - January 2017: 由于这个答案仍然让我成为代表，我强烈鼓励任何读这篇文章的人查看Rihards的答案并给予它一些爱 . Rihards的参考文献比这个答案更现代，如果你需要在浏览器中自动播放应该会有所帮助 .

    移动浏览器中的自动播放限制是操作系统开发人员的有意限制 . 据我所知，绝对没有办法在移动浏览器中自动播放内容，因为触发内容播放所需的事件是OS / Phone事件，浏览器本身无法控制或与之交互 .

    Facebook已经在其广告库中实施了视频自动播放功能，但这只能通过其原生应用程序实现 . 即使是强大的FB也必须放弃对电话之神的威力 .

    我发现了一篇关于这种新的FB广告演示技术的文章，评论部分中的一些用户抱怨在浏览器中禁用自动播放的方法，就像使用本机FB应用程序一样：

    Facebook to Add Auto-Play Video to NewsFeed for All Mobile Users

    但这显然是一个假设的抱怨和戏弄，因为评论是在FB完全启动该功能之前做出的 .

    My conclusion: 如果你绝对需要自动玩，你将不得不去"native"（哈......看看我在那里做了什么？） .

    回复于
  • 36

    在移动Chrome上我启用了数据保存选项，默认情况下禁用自动播放静音视频，在这种情况下，GIF是部分低质量高带宽解决方案 .

    回复于
  • 2

    我在这个主题上发现的几乎所有答案中都缺少的是我需要 playsinline 属性才能在移动浏览器中正常工作（不要全屏播放，而是将其嵌入到网站内容中）

    所以我的完整例子是：

    <video width="100%" height="auto" autoplay muted loop playsinline id="my_video">
  <source data-src="/video.mp4" type="video/mp4">
</video>
    回复于
  • 2

    我在iOS 11上自动播放视频时遇到了问题.Android和iOS 10.3的解决方案与Pointi和Rihards提供的解决方案相当 .

    iOS 11上的Mobile Safari似乎再次成为了一个女主角 . 请确保添加前缀属性（webkit-playsinline） .

    <video playsinline webkit-playsinline autoplay muted loop>
  <source src="./video.mp4" type="video/mp4">
</video>

    此解决方案适用于所有流行的桌面浏览器以及Android Chrome和iOS 10/11 Safari / Chrome . 它甚至可以在大多数内联浏览器中使用，例如在Facebook-App中（在iOS 11上测试） .

    找到这个花费我几个小时，所以我希望我能帮助你至少 .

    回复于

相关问题