Question

当我尝试在移动设备中打开网址时，如果没有静音属性，自动播放功能无效。如何在不使用静音属性的情况下播放视频？我需要在没有点击静音按钮的情况下进行音量调制，更重要的是所有事情都可以在没有 JS和Jquery 的情况下工作。

Answer 1

你无法在没有黑客攻击的情况下在iOS中实现这一点。来自Apple WebKit官方文档：

从iOS 10开始，WebKit放宽了内联和自动播放策略   使这些演示成为可能，但仍然记住网站'   带宽和用户电池。

默认情况下，WebKit将具有以下策略：

  如果源媒体不包含音轨，则
视频元素将被允许在没有用户手势的情况下自动播放。

视频静音元素也可以在没有用户手势的情况下自动播放。如果元素在没有用户手势的情况下获得音轨或变为非静音，则播放将暂停。

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

至于移动Chrome（Android）：

适用于Android的Chrome支持视频的静音自动播放功能版本53.视频元素的播放将自动开始一次如果自动播放和静音都设置，并播放，则可以看到它可以使用play（）以progamatically方式启动静音视频。先前，无论如何，移动设备上的播放必须由用户手势启动柔和的状态。

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

Answer 2

只需在视频中加入defaultMuted即可在自动播放中启用声音。例如，

 <video id="myVideo" defaultMuted autoplay controls>
     <source src="myVideo.mp4" type="video/mp4">
 </video>

参考： http://www.w3schools.com/tags/av_prop_defaultmuted.asp

Answer 3

在Ios上，请确保您没有节能。这样一来，视频就无法播放。

Answer 4

我无法理解它，但这可以在iOS Safari和Firefox上运行（尚未经过Android测试）：

<video playsinline autoplay muted loop id="DemoReel2018">
<source src="resources/AgsVision_backgroundMovie.mp4" type="video/mp4">
</video>

......事情是，它只在我设置视口后才起作用：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

如果有人能够解释为什么会发生这种情况，我真的很想知道。否则......请继续关注更多古怪的东西：））

Answer 5

您尝试这一个链接，他们还提供了有关更改原因的更多信息？：

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

Answer 6

简单看代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example movie autoplay</title>
    <meta charset="UTF-8">                
</head>
<body>
    <video autoplay muted>
        <source src="midia/video.mp4" type="video/mp4">
        <source src="midia/video.webm" type="video/webm">
    </video>
</body>
</html>

您需要检查浏览器和支持的格式。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#Browser_compatibility

https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats

Answer 7

也许这对您有用

<video  autoplay="autoplay" loop="loop" muted defaultMuted playsinline>

Answer 8

<video autoplay="autoplay" loop="loop" muted defaultMuted playsinline  oncontextmenu="return false;"  preload="auto"  id="myVideo">
        <source src="assets/video/1.mp4" type="video/mp4">
        </video>

此代码在Ios和Android手机上对我有效

移动设备中的html5自动播放视频

8 个答案: