更改日期后,每个日期下对应多个video文件(动态生成),我们鼠标指向某个video开始播放,移开则自动暂停,可以用来暂时性解决点击播放多个视频声音混杂的问题(即点开视频了不关 又播下一个视频)。
实现基础:
1 video标签
2 JQuery
Html:
<div class="col-sm-9" id="filelist">
<video controls="" width="320" height="240" class="video_link" poster="xxx.jpg">
<source src="xxx.mov?" type="video/mp4">
</video>
………….
</div>
鼠标指向video播放 移出时暂停
$("#filelist").on('mouseenter', ".video_link", function(){
var videoDom = event.target;
videoDom.play();
});
$("#filelist").on('mouseleave', ".video_link", function(){
var videoDom = event.target;
videoDom.pause();
});
分析 :
采用Jquery 提供的dom鼠标移入事件 (mouseenter)配合video标签方法(play)进行播放。
采用Jquery 提供的dom鼠标移出事件 (mouseleave)配合video标签方法(pause)进行暂停。
video标签方法可参考:
https://www.jianshu.com/p/404d01b8e713