I have a table which looks like this:
我有一个看起来像这样的表:
+------------+---------+
| Name | View |
+------------+---------+
| 1.mp4 | X |
| 2.mp4 | X |
+------------+---------+
X
are view buttons.
X是视图按钮。
When the user clicks on any of the view button, I want to show the corresponding video in a modal. I am using html5 video tag for that. In the video tag, I want to provide the src
dynamically.
当用户点击任何视图按钮时,我想以模态显示相应的视频。我正在使用html5视频标签。在视频标签中,我想动态提供src。
The src would be name of the video. I am using javascript for this.
src将是视频的名称。我正在使用javascript。
HTML:
the X
button:
X按钮:
<a data-toggle="modal" data-id={{name}} href="#Modal" class="preview">X</a>
<!--{{name}} is 1.mp4-->
modal:
...
<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;
When I check the source code of the page, the src is correctly set,
当我检查页面的源代码时,src被正确设置,
<source id="vsrc" type="video/mp4" src="1.mp4">
But there is no video shown on the page, only an empty container and some disabled video control buttons are displayed.
但是页面上没有显示视频,只显示空容器和一些禁用的视频控制按钮。
I tried pasting this source code into the actual HTML page and it worked that way, I can't figure out why it doesn't work dynamically.
我尝试将这个源代码粘贴到实际的HTML页面中,并且它以这种方式工作,我无法弄清楚为什么它不能动态地工作。
1 个解决方案
#1
2
Set the video source directly like this...
像这样直接设置视频源...
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>
#1
2
Set the video source directly like this...
像这样直接设置视频源...
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>