Question

标题几乎说明了一切。我有一个视频，当到达页面时自动开始播放。

在HTML代码中，我将muted =“muted”。这是奇怪的部分。当看到控制器时，它显然是静音的，但音乐仍在播放，可以听到。即使我在W3Schools上查看HTML5视频示例，它也会在静音时播放音乐。

有没有办法，例如通过jQuery绕过这个？我有一个jQuery线，坚持视频静音，但没有效果。

以下是HTML代码：

<video id="video" width="640px" height="350px" autoplay="autoplay" loop="loop" controls="controls" muted="muted">
            <source src="intouchables.f4v" type="video/mp4">
            Your browser does not support the video tag.
        </video>

希望你能帮助我。 jQuery行如下：

$（“video”）。prop（'muted'，true）;

提前致谢。

Answer 1

我不完全确定在muted标记内定义时video属性为什么出现故障。但是，您可以这样做：

首先，从视频代码中删除muted="muted"属性。保持简单：

<video id="video" width="640px" height="350px" autoplay="autoplay" loop="loop" controls="controls">
    <source src="intouchables.f4v" type="video/mp4">
    Your browser does not support the video tag.
</video>

现在，定义一个在加载页面时将视频静音的功能。

window.onload = function () {
    var element = document.getElementById('video');
    element.muted = "muted";
}

我已经验证了这一点，并且有效。

Answer 2

我的答案中没有真正的新答案-只是试图使这个问题保持最新状态，并希望避免人们像我刚才那样浪费一整天。

据我所知（特别是因为这个问题太老了），muted在视频动态添加到页面时从未起作用。而且由于muted不起作用，所以muted autoplay也将不起作用。

我认为发生的事情是浏览器对页面加载做出了某些决定，并且由于某些超级奇怪的原因，添加到页面之后的视频即使具有muted属性也不会静音。我相信这是Chrome中的错误，不是我在Safari中发生的-但看来我们暂时还没有解决。

Google的blog entry on autoplay/mute成立仅一年，它提供以下见解：

Chrome的自动播放政策很简单：


始终允许静音的自动播放。

在以下情况下，允许自动播放声音：

用户已与域进行了交互（单击，点击等）。

在桌面上，已经超过了用户的“媒体参与度索引”阈值，这意味着该用户以前曾使用   声音。

在移动设备上，用户已将该网站添加到他或她的主屏幕中。



顶部框架可以将自动播放权限委派给其iframe，以允许自动播放声音。

仅缺少一件主要的事情！

“静音” HTML属性仅在视频在初始加载时出现在HTML中时生效。这也适用于“自动播放静音”视频。

那么这有什么影响？

如果以编程方式播放无声音的视频，则必须先将其静音。因此，如果将动态视频添加到页面，则必须在将video.muted = true添加到DOM之后（或恰好在播放之前）明确设置video.play()。

如果您尝试以编程方式执行// video.muted = true（例如，当某人向下滚动经过静音的视频并希望播放时），则必须首先将视频静音。

我在Angular中遇到了这个问题，并花了太多时间，假设它与我使用的模板或与Angular相关的事实有关。

我在StackBlitz上做了一个测试应用程序。您需要取消注释行@ViewChild('bunnyVideo', { read: ElementRef }) bunnyVideo: ElementRef;才能使其正常工作。

https://stackblitz.com/edit/angular-ze4t9y

要实现的其他重要事项是：

即使视频实际上没有声音，也必须将其静音。如果需要，请对“ bunny”视频进行测试。
博客中概述的较新的“媒体参与”规则可能会在测试页面时使您困惑，因为您将与该页面进行交互。您必须要做的是关闭浏览器，或以隐身模式打开新窗口-以便重置此参与规则（请参阅博客条目）。

如果用户未首先与页面“互动”，而尝试播放非静音视频，则会在浏览器中显示以下错误。如果您没有看到非静音视频的消息，则可能是因为您与页面进行了互动，Chrome浏览器允许播放该视频。

最后，如果您使用的是Angular（动态添加了所有内容），则可以使用以下方法使视频静音：

 const video: HTMLVideoElement = this.bunnyVideo.nativeElement;

 // explicitly mute it...
 video.muted = true;

 // ...before attempting to play
 video.play().catch((err) => {
    alert('video error ' + err);
 });

然后在您想要播放时：

    {
  locale: "en",
  title: " Survey",
  focusFirstQuestionAutomatic: false,
  pages: [
   {
    name: "livingEnvironment",
    elements: [
     {
      type: "html",
      name: "navigationWarning",
      html: "warning"
     },
     {
      type: "html",
      name: "IntroEnvironment",
      html: "We will now ask you questions about your living environment ."
     },
     {
      type: "text",
      name: "numhousehold",
      width: "auto",
      title: "How many people (including yourself) lived in your household at the time of Hurricane Harvey? ",
      validators: [
       {
        type: "numeric",
        text: "Please enter a number between 1 and 99.",
        minValue: 1,
        maxValue: 99
       },
       {
        type: "expression",
        text: "you wrong here",
        expression: "{numhousehold} > {householdtype.children}"
       }
      ],
      inputType: "number"
     },
     {
      type: "multipletext",
      name: "householdtype",
      width: "auto",
      title: "Of these, how many (including yourself) were:",
      items: [
       {
        name: "children",
        inputType: "number",
        title: "Children under 18 years old",
        validators: [
         {
          type: "regex",
          text: "One of the numbers below is out of range. Please enter 0, a positive number, or leave the box blank.",
          regex: "^(\\s*|\\d+)$"
         }
        ]
       },
       {
        name: "adults",
        inputType: "number",
        title: "Adults between 18-59 years old",
        validators: [
         {
          type: "regex",
          text: "One of the numbers below is out of range. Please enter 0, a positive number, or leave the box blank.",
          regex: "^(\\s*|\\d+)$"
         }
        ]
       },
       {
        name: "seniors",
        inputType: "number",
        title: "Seniors (60+)",
        validators: [
         {
          type: "regex",
          text: "One of the numbers below is out of range. Please enter 0, a positive number, or leave the box blank.",
          regex: "^(\\s*|\\d+)$"
        }]
            }
        ]
    }
]
}]
};

Answer 3

看起来这个静音停止在chrome 64中工作。仍然在63中工作。

Answer 4

<video preload= "true" autoplay = "autoplay" loop = "loop" muted>
    <source src = "video/Real-Estate.mp4" type = "video/mp4">
</video>

Answer 5

这对我来说很好。

    readinessProbe:
      httpGet:
        path: /healthz
        port: 80
        httpHeaders:
          - name: Host
            value: KubernetesLivenessProbe
      initialDelaySeconds: 20

Answer 6

要通过HTML5直接静音而不是jQuery，您还可以在视频标记中使用volume="0"，即：

<video preload="true" autoplay="" volume="0" poster="img/example.jpg">

Answer 7

在生成视频时，请确保将音频编解码器设置为AAC。我在使用OpenShot时遇到了同样的问题，默认设置为AC3。

Answer 8

在Angular中，可以尝试 [muted] =“'muted'” ，它对我有用。

<video id="video" style="width:100%; height:100%" autoplay [muted]="'muted'" loop>
  <source src="./../../assets/video/model-video.mp4" type="video/mp4">
</video>

Answer 9

供html5使用：

<video controls loop muted height="" width=""  >

  <source src="" type="video/(put format here ex .mp4)" />
<source src="" type="video/(put another format of same video here if there is one ex .wav)" />
Your browser does not support the HTML5 element.
</video>

这很不错。

HTML5视频静音但仍在播放

9 个答案: