HTML中的随机视频生成器答案

【问题标题】：random video generator in HTMLHTML中的随机视频生成器
【发布时间】：2016-01-09 06:54:03
【问题描述】：

我使用了一个简单的随机数生成器并将我的 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>

【问题讨论】：

标签： javascript html video random

【解决方案1】：

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

<!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>

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

【讨论】：

非常感谢！这确实有效！我以为你不能做到Math.floor((Math.random()*3)+1) + ".mp4"，但实际上你可以！再次感谢！

【解决方案2】：

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

【讨论】：