Question

我使用了一个简单的随机数生成器并将我的mp4文件命名为“1”“2”和“3”，我的html页面为空白

代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Connor's video clock</title>
</head>

<body>
  <script>
    < div id = vid >
      < video width = "320"
    height = "240"
    controls >
      < source src = Math.floor((Math.random() * 3) + 1) + ".mp4" > Please update your browser < /source>
  </script>
</body>

</html>

Answer 1

您不能在脚本标记中放置html标记。另外，我认为HTML标签在成角度的括号和标签名称之间不应该有空格。试试这个：

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Connor's video clock</title>
</head>

<body>
  <div id = "vid">
    <video width = "320"
    height = "240"
    controls>
      <source id="vsrc" />
      Please update your browser.
    </video>
  </div>
  
  <script>
    document.getElementById("vsrc").src = Math.floor((Math.random()*3)+1) + ".mp4";
  </script>
</body>

</html>

＆＃13;

这里，javascript通过选择该元素（通过使用document.getElementById（））然后更改src属性来填充视频的src。

Answer 2

我想你想要的是显示一个视频，其源由你的javascript函数分配。您的代码无法运行的问题是您没有在脚本标记中编写javascript。你在里面写的实际上是HTML标签。附上一个例子供您参考。根据这个changing source on html5 video tag，可能无法从函数中更改源。改为改变视频标签中的src属性。

<!DOCTYPE html>
<html>
    <head>
         <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
         <script type="text/javascript">
           $(document).ready(function() 
           {
               var srcLinkSuffix = Math.floor((Math.random() * 3) + 1);
               var video = document.getElementById('video');
               var srcLink = "video_"+srcLinkSuffix+".mp4";
               video.setAttribute("src", srcLink );
           });
        </script>
    </head>
    <body>
         <video width="320" height="240" controls src="" id="video" />
    </body>
</html>

HTML

2 个答案: