如何使用 jQuery 动态更改视频，其中源路径存储在数据库中，文件存储在文件系统中

how to dynamically change video using jquery where the source path is stored in database and file in file system

本文关键字：存储 文件系统 路径 文件 数据库 jQuery 何使用 动态 视频      更新时间：2023-09-26

我将视频文件存储在文件系统中，并将路径存储在数据库中。我能够使用 JS 和 jQuery 显示视频。我想在单击列表时动态更改视频。但只有第一个视频在播放。这是我的代码

<script type="text/javascript">
function fn() {
  var player = document.getElementById("videoclip");
  var mp4Vid = document.getElementById("mp4video");
    var a = '/site_media/media/';
  var b = document.getElementById("btn").value;
  var c = a + b;
  player.pause();
  document.getElementById("mp4video").src = c;
   player.load();
   player.play();
}
 </script>
<body>
  <div align="right">
  <table border='1'>
  <tr><th>slno</th> <td>Filename</td></tr>
  {% for i in total %}//total contains the video paths(python)
  <tr>
  <td>{{ forloop.counter }}</td>
  <td align="center">
  <input type="button" onclick="fn()" id="btn" value="{{ i.vid }}"/>
  </td>
  </tr>
  {% endfor %}
  </table>
  </div>
<div align="center">
<video id="videoclip" width="320" height="240" controls='controls' autoplay>
 <source id= "mp4video" src="/site_media/media/upload/vid2.mp4" type="video/mp4">
  </video> <br></div>
</body>

id 必须是唯一的，更改 html 的内容如下：-

<input type="button" onclick="fn(this)" id="{{ i.vid }}" value="{{ i.vid }}"/>

然后在jquery代码中：-

function fn(dv) {
  var player = document.getElementById("videoclip");
  var mp4Vid = document.getElementById("mp4video");
  var a = '/site_media/media/';
  var b = $(dv).attr('id');
  var c = a + b;
  player.pause();
  document.getElementById("mp4video").src = c;
  player.load();
  player.play();
}
相关文章：