无法使用js动态显示html5视频答案

【问题标题】：Cannot show a html5 video dynamically with js无法使用js动态显示html5视频
【发布时间】：2017-04-03 10:03:19
【问题描述】：

我有一个如下所示的表格：

+------------+---------+
|    Name    |  View   |
+------------+---------+
| 1.mp4      |    X    |
| 2.mp4      |    X    |
+------------+---------+

X 是查看按钮。

当用户单击任何视图按钮时，我想以模式显示相应的视频。我为此使用 html5 视频标签。在视频标签中，我想动态提供src。

src 将是视频的名称。我为此使用了 javascript。

HTML：

X 按钮：

<a data-toggle="modal" data-id={{name}} href="#Modal" class="preview">X</a>
<!--{{name}} is 1.mp4-->

模态：

...
<div class="modal-body">
<video width="548" height="455" controls>
<source id="vsrc" type="video/mp4">
Your browser does not support video playback.
</video>
</div>
...

JS：

var videoName = $(this).data('id'); //This is correct
document.getElementById('vsrc').src = videoName;

当我检查页面的源代码时，src设置正确，

<source id="vsrc" type="video/mp4" src="1.mp4">

但是页面上没有显示视频，只显示一个空容器和一些禁用的视频控制按钮。

我尝试将这个源代码粘贴到实际的 HTML 页面中，并且它是这样工作的，我不知道为什么它不能动态工作。

【问题讨论】：

你能上传你的代码（即）示例页面
@Ram 代码已经贴在问题里了。
您检查浏览器控制台是否有错误？ src 可能看起来正确，但如果路径不正确，它将在浏览器控制台中返回 404 错误。

标签： javascript html video

【解决方案1】：

直接这样设置视频源...

var vid = document.getElementById('vid');

vid.src = "http://clips.vorwaerts-gmbh.de/VfE_html5.mp4";
vid.play();

<div class="modal-body">
    <video id="vid" width="548" height="455" controls>
    Your browser does not support video playback.
    </video>
</div>

【讨论】：