移动端HTML5中video视频播放优化方案

2015年5月7日 16403点热度 0人点赞 0条评论

在做一个致匠心的专题页面中多个视频在要在本页面播放，为了更友好的用户体验，对视频播放进行优化，点开播放其中的一个视频，在没有看完视频并且没停止该视频的播放的情况下，又点击播放了另外一个视频，这时在一个页面中两个视频同时播放，需要用户自己去关闭上一个视频播放，那么我们通过页面中加入js代码帮助用户节省这个步骤，实现当其中一个视频播放时，又打开了另一个视频，那么上一个视频自动停止播放。

下面是我需要的一个腾讯视频引用地址：

视频获取方式是通过腾讯视频页面分享中获取：通用代码

该地址解析出来的页面视频标签为html5中的vedio标签，解析的代码如下：

下面通过加入这段js代码来优化视频的播放(解决方案)

$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>