Question

所以我有一个网站，我只是为了好玩，但我目前网站有问题（uppah.net）

我只是想在网站上播放视频，但它并没有出现在Chrome上。它在Microsoft Edge和Internet Explorer上运行良好。

我已经读过谷歌浏览器不支持MP4，所以我尝试将视频格式更改为WebM，但结果相同。

我使用以下代码：

<html>
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
        <title>Uppah</title>
        <link href="style.css" rel="stylesheet" />
        <link href="FCNTiGM.gif" rel="shortcut icon" />

        <script>
            function load() {
                document.getElementById("vsrc").src = Math.floor((Math.random()*11)+1)+".mp4";
            }
        </script>

    </head>
    <body onload="load()">
        <div id="wrapper">
            <video autoplay class="video" loop><source id="vsrc" /> Please update your browser.</video>
        </div>


        <div id="polina">
            <h1>Uppah</h1>

            <p><a href="http://steamcommunity.com/id/Uppahmost" target="_blank">Steam Profile</a></p>
            &nbsp;

            <p>You won&#39;t find any hacks here, noob. :^)&nbsp;</p>
        </div>
    </body>
</html>

我试图改变：

<script>
    function load() {
        document.getElementById("vsrc").src = Math.floor((Math.random()*11)+1)+".mp4";
    }
</script>

向

<script>
    function load() {
        document.getElementById("vsrc").src = Math.floor((Math.random()*11)+1)+".webm";
    }
</script>

但它没有发挥。

Answer 1

为什么不将这个整个视频元素附加到包装器div

＆＃13;

function load() {
  var src = Math.floor((Math.random()*11)+1)+".mp4";
  var wrapper = document.getElementById("wrapper");
  wrapper.innerHTML = '<video autoplay class="video" id="video" loop><source src="'+src+'" type="video/mp4" /> Please update your browser.</video>';
}

＆＃13;

<html>
  <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Uppah</title>
    <link href="style.css" rel="stylesheet" />
    <link href="FCNTiGM.gif" rel="shortcut icon" />

  </head>
  <body onload="load()">
    <div id="wrapper">

    </div>
    <div id="polina">
      <h1>Uppah</h1>

      <p><a href="http://steamcommunity.com/id/Uppahmost" target="_blank">Steam Profile</a></p>
      &nbsp;

      <p>You won&#39;t find any hacks here, noob. :^)&nbsp;</p>
    </div>
  </body>
</html>

＆＃13;

这是一个工作示例（只需点击＆＃34;使用JS＆＃34运行;输出部分中的按钮）：http://jsbin.com/kabibifoqo/edit?html,js,output

HTML5视频无法在Chrome中播放

1 个答案: