多video标签指向时播放

更改日期后,每个日期下对应多个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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值