分享好友 教程首页 教程搜索 频道列表

h5版视频播放和暂停

2022-04-26 18:092110
+关注29
核心提示:用代码测试

本实例使用了video.js 组件,请自行引用

HTML:

<div class="video-js"><video id="my-video_html5_api" src="这里放mp4链接"></div>


JS:

<script type="text/javascript">
    // 在此处为点击video,和点击按钮,都添加上事件,来处理视频的播放暂停;
    $(function () {
	    $('.video-js').on('touchstart','#my-video_html5_api',function () {
	        $("video")[0].pause();
	        $('.vjs-big-play-button').show();
	    })
	    $('.video-js').on('touchstart','.vjs-big-play-button',function () {
	        $("video")[0].play();
	        $('.vjs-big-play-button').hide();
	    })
	})
</script>


本文标签: #视频 #h5 #手机版
整理员:小黑
免责声明:凡注明来源本网的所有作品,均为本网合法拥有版权或有权使用的作品,欢迎转载,注明出处。非本网作品均来自互联网,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
生成海报
您可能在找更多

html5 video微信浏览器视频不能自动播放

    用代码自行测试

网络转载 JavaScript教程2023-02-27

移动端控制视频点击播放点击下一个视频时自动停止播放&监听滑动溢出屏幕高度时停止播放

    script type="text/javascript"var go;//记录video播放器位置var video=document.querySelectorAll('video')//获取页面中所有videofor(var i=0;ivideo.length;i++) {(function (v) {video[v].addEventListener('play',function(e){if(go){if(go!=this){go.pa

网络 web前端开发2020-05-22

下一篇
我来说两句
抢沙发