蓝戒的博客


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

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

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

<iframe frameborder="0" width="100%" src="http://v.qq.com/iframe/player.html?vid=v0147o7cei4&tiny=0&auto=0" allowfullscreen></iframe>

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

share_video

该地址解析出来的页面视频标签为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&amp;br=29&amp;platform=2&amp;fmt=auto&amp;level=0&amp;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>

本文固定链接: http://www.webzsky.com/?p=455 | 蓝戒的博客

cywcd
该日志由 cywcd 于2015年05月07日发表在 html5 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 移动端HTML5中video视频播放优化方案 | 蓝戒的博客

移动端HTML5中video视频播放优化方案:等您坐沙发呢!

发表评论


快捷键:Ctrl+Enter
来自的朋友,欢迎您 点击这里 订阅我的博客 o(∩_∩)o~~~
×