HTML5 + CSS 3 - 如何静默自动播放视频？

Question

如何创建一个包含自动播放视频的 div，像这样 site？我可以用 HTML5 和 CSS3 来实现吗？

我检查了一下，我得到了一堆我不明白的代码：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="517.135px" height="136.187px" viewBox="0 0 517.135 136.187" enable-background="new 0 0 517.135 136.187" xml:space="preserve"><g><path d="M85.767,53.439V0h29.971c5.827,0,10.39,4.226,10.39,9.617v14.497c0,5.39-4.563,9.615-10.39,9.615H98v19.71H85.767z      M112.574,22.933c0.779,0,1.322-0.428,1.322-0.814V11.611c0-0.386-0.543-0.815-1.322-0.815H98v12.137H112.574z"></path><path d="M161.521,53.439l-4.105-11.119h-17.939l-3.934,11.119h-12.525L143.144,0h10.767l20.125,53.439H161.521z M153.605,31.753     l-5.12-15.152l-5.122,15.152H153.605z"></path><path d="M210.693,53.439l-10.771-19.71h-9.253v19.71h-12.233V0h30.825c5.828,0,10.392,4.226,10.392,9.617v14.497     c0,4.004-2.608,7.512-6.494,8.95l11.186,20.375H210.693z M206.098,22.933c0.78,0,1.323-0.428,1.323-0.814V11.611     c0-0.386-0.543-0.815-1.323-0.815h-15.429v12.137H206.098z"></path><path d="M266.348,53.439l-4.104-11.119h-17.942l-3.931,11.119h-12.529L247.973,0h10.766l20.127,53.439H266.348z M258.434,31.753     l-5.123-15.152l-5.119,15.152H258.434z"></path><path d="M293.757,53.439c-5.782,0-10.311-4.224-10.311-9.618V9.617c0-5.392,4.528-9.617,10.311-9.617h19.233     c5.829,0,10.396,4.226,10.396,9.617v8.329l-12.238,1.828v-8.163c0-0.386-0.539-0.815-1.319-0.815h-12.825     c-0.776,0-1.322,0.43-1.322,0.815v30.218c0,0.385,0.546,0.814,1.322,0.814h12.825c0.78,0,1.319-0.43,1.319-0.814v-8.623     l12.238,1.828v8.787c0,5.395-4.566,9.618-10.396,9.618H293.757z"></path><polygon points="362.97,53.439 362.97,31.581 345.615,31.581 345.615,53.439 333.38,53.439 333.38,0 345.615,0 345.615,20.784      362.97,20.784 362.97,0 375.199,0 375.199,53.439   "></polygon><path d="M395.931,53.439c-5.78,0-10.305-4.224-10.305-9.618V0h12.232v41.829c0,0.385,0.544,0.814,1.32,0.814h12.827     c0.778,0,1.32-0.43,1.32-0.814V0h12.233v43.821c0,5.395-4.567,9.618-10.39,9.618H395.931z"></path><polygon points="446.762,53.439 446.762,10.796 431.284,10.796 431.284,0 474.471,0 474.471,10.796 458.995,10.796      458.995,53.439   "></polygon><polygon points="480.62,53.439 480.62,0 517.135,0 517.135,10.796 492.85,10.796 492.85,21.093 514.998,21.093 514.998,31.888      492.85,31.888 492.85,42.644 517.135,42.644 517.135,53.439   "></polygon></g><g><polygon points="127.535,125.525 127.535,96.896 117.776,116.474 107.678,116.474 97.917,96.896 97.917,125.525 85.767,125.525      85.767,70.399 97.517,70.399 112.726,101.673 127.938,70.399 139.686,70.399 139.686,125.525   "></polygon><path d="M160.53,125.525c-5.938,0-10.592-4.334-10.592-9.863V80.259c0-5.529,4.653-9.859,10.592-9.859h20.794     c5.988,0,10.678,4.33,10.678,9.859v35.403c0,5.529-4.69,9.863-10.678,9.863H160.53z M163.892,81.387     c-0.865,0-1.447,0.486-1.447,0.938v31.274c0,0.451,0.583,0.938,1.447,0.938h14.159c0.865,0,1.446-0.486,1.446-0.938V82.325     c0-0.452-0.582-0.938-1.446-0.938H163.892z"></path><polygon points="236.782,125.525 215.885,93.46 215.885,125.525 203.733,125.525 203.733,70.399 215.404,70.399 236.301,102.603      236.301,70.399 248.451,70.399 248.451,125.525   "></polygon><polygon points="273.922,125.525 273.922,81.387 257.902,81.387 257.902,70.399 302.445,70.399 302.445,81.387 286.43,81.387      286.43,125.525   "></polygon><path d="M346.044,125.525l-11.149-20.402h-9.698v20.402h-12.504V70.399h31.829c5.885,0,10.674,4.423,10.674,9.859v15.002     c0,4.139-2.716,7.76-6.766,9.213l11.552,21.051H346.044z M341.247,94.132c0.861,0,1.446-0.48,1.446-0.936V82.325     c0-0.452-0.585-0.938-1.446-0.938h-16.051v12.746H341.247z"></path><path d="M459.04,125.525l-4.245-11.512h-18.673l-4.074,11.512h-12.79l20.76-55.125h11.042l20.764,55.125H459.04z M450.914,103.261     l-5.418-16.023l-5.419,16.023H450.914z"></path><polygon points="480.62,125.525 480.62,70.399 493.126,70.399 493.126,114.537 517.197,114.537 517.197,125.525   "></polygon><g><polygon points="371.601,125.525 371.601,70.399 409.236,70.399 409.236,81.387 384.106,81.387 384.106,92.23 407.024,92.23       407.024,103.216 384.106,103.216 384.106,114.537 409.236,114.537 409.236,125.525    "></polygon><rect x="381.077" y="63.598" width="18.682" height="2.818"></rect></g></g><g><path d="M31.597,65.801L2.566,44.852l-2.539-5.215L0,0h11.048l24.296,17.6L59.647,0h11.05l-0.029,39.637l-2.54,5.215     L39.095,65.801H31.597z M38.177,62.951l27.704-19.99l1.938-3.98L67.845,2.85h-7.272L36.049,20.605h-1.407L10.127,2.85H2.851     L2.874,38.98l1.938,3.98l27.705,19.99H38.177z"></path><polygon points="36.974,23.454 61.495,5.699 64.994,5.699 64.972,38.323 63.636,41.069 37.254,60.104 33.436,60.104 7.062,41.069      5.724,38.323 5.702,5.699 9.202,5.699 33.718,23.454   "></polygon></g><g><path d="M31.597,136.187L2.566,115.238l-2.539-5.213L0,70.387h11.048l24.296,17.597l24.303-17.597h11.05l-0.029,39.638     l-2.54,5.213l-29.034,20.949H31.597z M38.177,133.337l27.704-19.988l1.938-3.984l0.025-36.13h-7.272L36.049,90.994h-1.407     L10.127,73.234H2.851l0.023,36.13l1.938,3.984l27.705,19.988H38.177z"></path><polygon points="36.974,93.841 61.495,76.085 64.994,76.085 64.972,108.707 63.636,111.453 37.254,130.49 33.436,130.49      7.062,111.453 5.724,108.707 5.702,76.085 9.202,76.085 33.718,93.841   "></polygon></g></svg>

我必须先在其他地方转换和托管视频吗？

我尝试使用 HTML5 视频标签，但它根本不起作用：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Autoplay</title>

</head>
<body>

    <video width="640"  height="360" src="https://www.youtube.com/watch?v=e3Nl_TCQXuw" autoplay muted>
        <p> Try this page in a modern browser! Or you can <a  href="https://www.youtube.com/watch?v=e3Nl_TCQXuw">download the  video</a> instead.</p>
    </video>

</body>
</html>

有什么想法吗？

Answer 1

<!DOCTYPE html>
<html>

<body>

  <video width="560" height="315" preload="auto" autoplay muted>
    <source src="insert you video url here" type="video">
  </video>

  <p><strong>Note:</strong> The video tag is not supported in Internet Explorer 8 and earlier versions.</p>

</body>

</html>

更多信息video标签attributesClick Here

如果你想在视频标签上source youtube 视频而不是refer this question

Answer 2

要自动播放视频，您可以使用 YouTube 提供的嵌入式 iframe，这非常简单：

<iframe width="640" height="360" src="https://www.youtube.com/embed/e3Nl_TCQXuw?autoplay=1" frameborder="0" allowfullscreen></iframe>

您可以找到有关可以传递给 iframe here 的参数的更多信息。

但是，要静默自动播放视频，您需要使用 JavaScript。这是与您的问题类似的示例：

• YouTube: How to present embed video with sound muted

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HTML5 Autoplay</title>
</head>
<body>
  <div id="muteYouTubeVideoPlayer"></div>
  <script async src="https://www.youtube.com/iframe_api"></script>
  <script>
    function onYouTubeIframeAPIReady() {
      var player;
      player = new YT.Player('muteYouTubeVideoPlayer', {
        videoId: 'e3Nl_TCQXuw', // YouTube Video ID
        width: 640,               // Player width (in px)
        height: 360,              // Player height (in px)
        playerVars: {
          autoplay: 1,        // Auto-play the video on load
          controls: 1,        // Show pause/play buttons in player
          showinfo: 0,        // Hide the video title
          modestbranding: 1,  // Hide the Youtube Logo
          loop: 1,            // Run the video in a loop
          fs: 0,              // Hide the full screen button
          cc_load_policy: 0, // Hide closed captions
          iv_load_policy: 3,  // Hide the Video Annotations
          autohide: 0         // Hide video controls when playing
        },
        events: {
          onReady: function(e) {
            e.target.mute();
          }
        }
      });
    }
  </script>
</body>
</html>

Answer 3

我可以用 HTML5 和 CSS3 实现吗？

是的，您可以，尽管链接 https://www.youtube.com/watch?v=e3Nl_TCQXuw 不返回视频，但它会返回加载了该视频的 youtube 页面，因此您需要以其他方式访问它，或者将其作为视频下载并在其他地方托管。

这是一个示例，显示源是有效视频时的代码工作。

<video autoplay muted preload="none"
       src="http://video.webmfiles.org/big-buck-bunny_trailer.webm"
       style="width: 500px;">
</video>

我检查了一下，我得到了一堆我不明白的代码：

<svg xmlns="http://www.w3.org/2000/svg" ...</svg> 标签是Scalable Vector Graphics。