video自动播放隐藏播放控制条，并且用点击 video 元素的时候控制暂停和播放...

说一下几个要求：

页面打开自动播放
当不能自动播放时，第一次点击（document）就触发视频播放
因为播放控制条会挡住视频内容，所以隐藏，但是点击 video 元素的时候可以控制暂停和播放
以上要求兼容pc端和移动端

<video width="670" height="auto" id="whVideo" autoplay webkit-playsinline x5-playsinline playsinline><source src="wh1.mp4" type="video/mp4">
</video>
<script>$(function(){var v = document.getElementById("whVideo");// 隐藏播放控制条，并且用点击 video 节点的时候 控制暂停和播放var vPaused = v.paused;if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {$(document).one('touchstart',function(){if(vPaused == true){v.play();}});$(v).on('touchstart', function(){var vPaused = v.paused;if(vPaused == true){v.play();}else{v.pause();}});}else{$(document).one('click',function(){if(vPaused == true){v.play();}});$(v).on('click', function(){var vPaused = v.paused;if(vPaused == true){v.play();}else{v.pause();}});}})
</script>

video自动播放隐藏播放控制条，并且用点击 video 元素的时候控制暂停和播放...相关推荐

opencv2/3播放视频实现进度条显示拖动、快进、快退、逐帧播放、显示当前帧于图像
最近在做运动物体跟踪,为了方便调试,需要对视频播放进行控制搜索后发现网上的都是参照<学习opencv>基于opencv1版本的, 故查阅相关资料自己写了一个. 主要功能: void Sh ...
android 以音频播放器为例实现通知栏显示通知，并实现切歌、暂停、播放，并实现加载网络图片，并实现关闭第三方APP音频
首先先给大家看下效果接下来我们看下具体如何实施 1.首先我们创建一个音频的单例对象,这样能保证每次在播放的的音频是唯一的(类名如:MediaPlayerUtil.java) package xxx; ...
vue +websocket 加载动图并实现暂停与播放
需求一:页面有小动图点击放大并实现暂停与播放 1.页面调用+点击放大以及调用组件时实现标题效果 <div class="" v-show="WRFgif" ...
html5 音乐播放进度条,js实现音乐播放控制条
前言 html5中提供audio标签, 该标签实现音频的播放,之前就一直对于音频以及视频播放比较感兴趣,一直想要自己实现一个音频和视频播放的模块,这也是本文章撰写的初衷,最近花了些时间实现了Audio ...
为FLASH(.SWF)文件添加播放控制条
网上有很多不错的FLASH格式的视频教程,可惜有些视频没有在其中加入能够控制进度的控制条,暴风影音这类软件能够播放FLASH格式的文件,并可以用它自己的控制条进行对FLASH的进度控制,由于各个视频录 ...
Js实现音乐播放控制条
前言 html5中提供audio标签, 该标签实现音频的播放,之前就一直对于音频以及视频播放比较感兴趣,一直想要自己实现一个音频和视频播放的模块,这也是本文章撰写的初衷,最近花了些时间实现了Audio ...
video自动循环播放设置
方法一:在video标签上直接添加autoplay 和loop属性,但直接添加需手动点击播放才可自动循环播放,想要一打开就让video自动循环播放需要添加muted属性,具体代码实现如下: <v ...
【Android FFMPEG 开发】FFMPEG 视频播放进度控制 ( 显示播放进度 | 拖动进度条播放 )
文章目录 I . FFMPEG 播放进度控制 II . FFMPEG 播放视频 ( 效果展示 ) III . FFMPEG 获取视频时长 IV . FFMPEG 视频播放进度获取 V . FFMPEG ...
video自动全屏播放
video自动全屏播放关于Screen.lockOrientation() https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockO ...

video自动播放隐藏播放控制条，并且用点击 video 元素的时候控制暂停和播放...

video自动播放隐藏播放控制条，并且用点击 video 元素的时候控制暂停和播放...相关推荐

最新文章

热门文章

video自动播放 隐藏播放控制条，并且用点击 video 元素的时候 控制暂停和播放...

video自动播放 隐藏播放控制条，并且用点击 video 元素的时候 控制暂停和播放...相关推荐

最新文章

热门文章

video自动播放隐藏播放控制条，并且用点击 video 元素的时候控制暂停和播放...

video自动播放隐藏播放控制条，并且用点击 video 元素的时候控制暂停和播放...相关推荐