css - 视频链接打不开

Question

我正在使用来自 Sublime 视频播放器 (http://www.sublimevideo.net/demos/lightbox/custom-overlay-opacity) 的灯箱来播放视频链接，但它没有打开视频

这是视频的代码。如何获取视频的链接

<div id = "demo">
<table>
<tr>
<td>
<a class="sublime zoomable" href="#video1" data-settings="overlay-opacity:0.9"><h3>Watch Demo</h3>
</td>
  <td>
<img src="assets/images/logo.png" width="50" height="50" /> 
  <!-- <span class="zoom_icon"></span> -->

</td>
</tr> 
</a>


<video id="video1" data-settings="uid:demo-lightbox-custom-overlay-opacity; autoresize:fit;" title="Demo: Lightbox, Custom overlay opacity" poster="assets/images/logo.png" width="640" height="360" preload="none" style="display:none">
<source src="assets/DemoVideo.mp4"/>
<!-- <source src="assets/DemoVideo.mp4.webm"/> -->
</video>
</table>
</div> 

Answer 1

在您的代码中，视频标签设置为隐藏 style="display:none" 您所要做的就是添加一个 jQuery 函数来检测图像是否被点击。在您的代码中，我添加了一个 toggle() 函数，因此如果您单击图像，将显示视频标签 -->show() 再次单击它将会隐藏--> hide()

更新:new fiddle

如果您想在点击图片后开始播放视频，您可以在点击函数中添加 document.getElementById('video1').play(); 您也可以在点击后停止播放视频通过第二次单击您的图像隐藏视频标签 document.getElementById('video1').pause();

The fiddele