鼠标经过视频播放,鼠标移除停止播放,再次经过继续播放

随着HTML5的广泛应用,在一些网站中,经常看到有些预览的短视频预览,鼠标经过就会播放,移除就会停止播放,再次移进去就会继续播放。

视频可以自己到网上下载,视频预览就是鼠标移进去就播放,离开就停止,再移进去就播放。

不过,在视频上,还增加了一直视频的图片,思路是,鼠标经过,图片隐藏,视频播放,鼠标离开,图片显示,视频停止。

其理论都是相同的。

附上视频代码

<video id="video" onmouseover="videoPlayback()" onmouseout="videoStopped()">
	            	<source type="audio/mp4" src="http://s3.pstatp.com/aweme/musics/video_top.fd700cfc.mp4"></source>
	        	</video>

JS代码

<script>
        //鼠标移进去
        function videoPlayback(){
            //获取视频标签
            var video = document.getElementById('video');
            //给视频标签添加缓存播放---video标签属性。
            video.setAttribute("autoplay","autoplay")
            //给视频标签添加循环播放---video标签属性。
            video.setAttribute("loop","loop")
            //播放视频
            video.play();
        }
        
        //鼠标离开
        function videoStopped(){
            //获取视频标签
            var oDiv = document.getElementById('video');
            //停止播放
            video.pause();
        }
    </script>

如果想在一个页面放置多个该怎么办呢,代码如下

<video id="video-1" onmouseover="videoPlayback(this)" onmouseout="videoStopped(this)">
	            	<source type="audio/mp4" src="http://s3.pstatp.com/aweme/musics/video_top.fd700cfc.mp4"></source>
	        	</video>

其中ID后面的数字不能重复,可以是1、2、3,总之自己看着写就行

js代码如下

<script>
        //鼠标移进去
        function videoPlayback(obj){
            //获取视频标签
            var video = document.getElementById(obj.id);
            //给视频标签添加缓存播放---video标签属性。
            video.setAttribute("autoplay","autoplay")
            //给视频标签添加循环播放---video标签属性。
            video.setAttribute("loop","loop")
            //播放视频
            video.play();
        }
        
        //鼠标离开
        function videoStopped(obj){
            //获取视频标签
            var video = document.getElementById(obj.id);
            //停止播放
            video.pause();
        }
    </script>

视频格式与浏览器的支持(截图):

部分内容来源于网络,如有侵权请联系删除::狂人日记 » 鼠标经过视频播放,鼠标移除停止播放,再次经过继续播放

赞 (0) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏