移动端HTML5中video视频播放优化方案
在做一个致匠心的专题页面中多个视频在要在本页面播放，为了更友好的用户体验，对视频播放进行优化，点开播放其中的一个视频，在没有看完视频并且没停止该视频的播放的情况下，又点击播放了另外一个视频，这时在一个页面中两个视频同时播放，需要用户自己去关闭上一个视频播放，那么我们通过页面中加入js代码帮助用户节省这个步骤，实现当其中一个视频播放时，又打开了另一个视频，那么上一个视频自动停止播放。
下面是我需要的一个腾讯视频引用地址：
<iframe frameborder="0" width="100%" src="http://v.qq.com/iframe/player.html?vid=v0147o7cei4&tiny=0&auto=0" allowfullscreen></iframe>
视频获取方式是通过腾讯视频页面分享中获取：通用代码
该地址解析出来的页面视频标签为html5中的vedio标签，解析的代码如下：
<video id="tenvideo_video_player_0" width="100%" height="100%" x-webkit-airplay="true" webkit-playsinline="true" preload="none" src="http://124.193.230.154/vhot2.qqvideo.tc.qq.com/v0142ssbrtw.m701.mp4?vkey=76D95FE80E0BD3331B0981A66634955918557811B84BDADC434F21FC08FFDDB7A793FE67020DA33F18FEB1BF8D54B787D7E0753C100D5073BB239A2DA1C766D25CD0D9861C717CA25132877E8C165DAF965E667FBC5B76CC&br=29&platform=2&fmt=auto&level=0&sdtfrom=v3010"></video>
下面通过加入这段js代码来优化视频的播放(解决方案)
<script>
$video.on('playing', function() {
// 开始播放是打点
$video.attr('data-updateTime', +new Date())
})
$video.on('pause', function() {
// 暂停播放时清除打点
$video.removeAttr('data-updateTime')
})
// 累加播放时间
$video.on('timeupdate', function(event) {
var $video = $(event.target),
updateTime = parseInt($video.attr('data-updateTime') || 0),
playingTime = parseInt($video.attr('data-playingTime') || 0),
times = parseInt($video.attr('data-times') || 0),
newtimes = 0,
video = $video.get(0),
duration = parseFloat($video.attr('data-duration') || 0),
now = +new Date()
// 播放时间
playingTime = playingTime + now - updateTime
// 播放次数
newtimes = Math.ceil(playingTime / 1000 / duration)
$video.attr('data-playingTime', playingTime)
$video.attr('data-updateTime', now)
})
</script>
移动端HTML5中video视频播放优化方案：等您坐沙发呢！
发表评论
