HTML5 视频自动播放无法正常工作

Posted 2023-05-07

【中文标题】HTML5 视频自动播放无法正常工作

【英文标题】：HTML5 Video Autoplay not working correctly

【发布时间】：2013-06-02 15:26:15

【问题描述】：

我正在使用此代码：

<video  loop="true" autoplay="true" controls>
<source src="http://www.example.com/CorporateVideo.mp4" type="video/mp4" />
<source src="http://www.example.com/CorporateVideo.ogv" type="video/ogv" />
<source src="http://www.example.com/CorporateVideo.webm" type="video/webm" />
</video>

我希望视频自动播放，但是当页面加载时视频无法播放。看起来这是一个缓冲问题，因为当我将鼠标悬停在视频上（以显示控件）时，视频总是 2 秒，然后停止并且不再继续。

注意：我刚刚再次访问该站点，自动播放似乎可以正常工作，但是当我再次尝试时，同样的问题正在发生，这是缓冲问题吗？我能做些什么来阻止这一切？

【参考方案1】：

尝试autoplay="autoplay" 而不是"true" 值。这是启用自动播放的记录方法。这听起来有点多余，我知道。

【讨论】：

使用这个 sn-p 它的跨浏览器兼容 - 我已经测试了它的完美工作***.com/questions/25848236/…

【参考方案2】：

如果视频未静音，Chrome 不允许自动播放。试试这个：

<video  loop="true" autoplay="autoplay" controls muted>
  <source src="http://www.tuscorlloyds.com/CorporateVideo.mp4" type="video/mp4" />
  <source src="http://www.tuscorlloyds.com/CorporateVideo.ogv" type="video/ogv" />
  <source src="http://www.tuscorlloyds.com/CorporateVideo.webm" type="video/webm" />
</video>

【参考方案3】：

移动浏览器通常会忽略此属性，以防止在用户明确开始下载之前消耗数据。

更新：android 和 ios 上较新版本的移动浏览器支持自动播放功能。但只有在视频静音或没有音频通道时才有效：

一些附加信息： https://webkit.org/blog/6784/new-video-policies-for-ios/

【讨论】：

那么如何强制手机自动播放？

就像一个简单的属性一样使用它：

我们必须使用 muted 属性，对吗？ - 根据手机型号/浏览器，它的工作非常零星（至少对于我的测试而言）

是的，没错，如果视频有音频通道则需要静音属性：

我的发现即使使用音频通道也是“静音”的：curious-electric.com/pens/video

【参考方案4】：

工作解决方案2018 年 10 月，用于视频，包括音频通道

 $(document).ready(function() 
     $('video').prop('muted',true).play()
 );

看看我的另一个更深入的答案：https://***.com/a/57723549/3049675

【讨论】：

$('video').attr('data-keepplaying', '') 是不必要的。 muted 属性是重要部分。

【参考方案5】：

html 
  padding: 20px 0;
  background-color: #efefef;


body 
  width: 400px;
  padding: 40px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);


video 
  width: 400px;
  display: block;

<video onloadeddata="this.play();this.muted=false;" poster="https://durian.blender.org/wp-content/themes/durian/images/void.png" playsinline loop muted controls>
    <source src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4" />
    Your browser does not support the video tag or the file format of this video.
</video>

【参考方案6】：

如果您的软件不支持 jQuery 或出现任何引用类型错误，您可能需要添加一些脚本。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
//Use above scripts only if the software you are working on doesn't support jQuery.

<script>
      $(document).ready(function() 

//Change the location of your mp3 or any music file. 
        var source = "../Assets/music.mp3";
    
        var audio = new Audio();
        audio.src = source;
        audio.autoplay = true;
      );
    </script>

【讨论】：

请考虑editing 您的答案以添加一些解释和详细信息。虽然它可能会回答问题，但仅添加一些代码并不能帮助 OP 或未来的社区成员理解问题或解决方案。