html5视频占用资源低,移动端HTML5中video视频播放优化方案_蓝戒的博客

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

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

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

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

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

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

})