文档章节

视频video标签在移动端的播放总结

wenzichel
 wenzichel
发布于 2016/10/11 10:07
字数 1179
阅读 52
收藏 2

<style type="text/css"> img{width:200px;} </style>

昨天新上线了一个关于腾讯18周年嘉年华的html5,这个html5是有5段不同的视频组成,中间使用各种手势进行串联,欢迎大家访问。

img

众所周知,在移动端的视频和音频都是需要用户手动点击开启的,而使用autoplay或在js里写play()是没有任何作用的。还有几个常见的问题这里也提示一下:

  1. iOS不支持preload属性,android可能会支持,没太细测试。用户只有在点击的时候才会去加载视频;
  2. iOS不支持autoplay属性,需手动点击开启,使用setTimeout延迟开启也不行;
  3. canplaythrough表示可是流畅播放了,但是在android下是没有卵用的; 有的android下是播放完成后才会触发。
  4. playing表示开始播放了,android下无效;
  5. canplay认为是视频元素没有问题,可以运行,没有更多含义了,基本用不上,android下一样;
  6. iOS和android都支持ended事件,但不能在ended事件里启动一段音频或视频,因此不能使用ended进行视频的循环播放;
  7. 有的iOS版本下,会弹出一个全屏播放器来播放视频,iPad则支持内联播放。有人说添加webkit-playsinline属性即可支持内联播放,不过我这儿并没有什么卵用。全屏播放后,会造成操作很不流畅,必须关闭视频的全屏效果,才能进行下一步的操作;
  8. 在网络不太好,或视频比较大的情况下,在点击和正式播放的空隙内会有一段等待视频加载的时间;有时候也会出现只有音频而没有画面的情况。

针对这些问题,有的是系统级的问题(比如调起全屏的播放器,循环播放视频等),我们无法修改;其他的,我们都尽量地通过程序来实现。

1. 如何获取视频的加载进度,让视频加载完成后才让用户进入?

不能,没有任何的办法来判断视频的加载进度,而且在iOS中,只有视频在播放的时候,才临时去加载视频。因此,即使在video标签中写了preload属性也是不管用的。使用canplaythrough事件也是没法检测的,虽然video标签在加载的时候会触发canplaythrough方法,但播放时依然会有卡顿的现象,而且某些android还不支持次属性。

2. 播放视频时只有声音没有图像

有部分原因是视频的编码不正确,在mp4格式的视频中,只支持h.264的视频。我的项目中也遇到了这种情况,但不是视频编码的问题。我在自己的网络下测试时,没有这样的问题,但是在外部环境测试时就会出现黑屏、有声音没图像的情况。那么应该就是视频有点大了,然后我就把视频压缩了一下,结果还是会有这样的情况出现。

经过同事的指点,我在用户点击和视频正式播放之前添加一个loading效果,当视频正式播放的时候就取消loading。如下:

    function video_loading( $video ){
        $('.video_loading').show();

        var timer = setInterval(function(){
            var currentTime = $video[0].currentTime; // 检测当前的播放时间

            if( currentTime>0 ){
                $('.video_loading').hide();
                clearInterval( timer );
            }
        }, 100)
    }

完美解决黑屏和有声音没图像的问题。

3. 在每段视频的结尾都有向上滑、点击的操作

我们是无法在视频上直接进行滑动和点击等操作的,只能是在视频播放结束时,添加一个透明遮罩,让用户在遮罩上进行操作。

    /**
        视频的播放时间改变时进行的操作
        videoid video标签的id
        cur 当前播放时间,可以传入ended参数
        func 回调函数
    */
    videoUpdate : function(videoid, cur, func){
        var myVideo = document.getElementById(videoid);

        if( myVideo ){
            if( typeof cur =='number' ){
                myVideo.addEventListener('timeupdate', function(){
                    if( this.currentTime>=cur ){
                        func();
                        myVideo.removeEventListener('timeupdate', function(){

                        }, false);
                    }
                }, false);
            }else{
                myVideo.addEventListener(cur, function(){
                    func();
                }, false);
            }
        }
    }

使用方法:

    // 第一屏的视频进行到4秒时,显示透明图层以提供用户操作
    tool.videoUpdate( 'video1', 4, function(){
        $('.s1 .overlay').show();
    });

    // 第一屏的视频结束时,显示向下滑动提示按钮
    tool.videoUpdate( 'video1', 'ended', function(){
    	$('.s1 .tip').show();
    });

总结

这是第一次做移动端的视频播放html5,在很多地方还有不足的地方,欢迎大家提出意见和建议。

博客:http://www.xiabingbao.com/video/2016/09/03/phone-video.html

© 著作权归作者所有

wenzichel
粉丝 0
博文 5
码字总数 9296
作品 0
朝阳
私信 提问
PC浏览器播放HLS协议的视频

以下是自己对 PC浏览器播放HLS协议视频 的解决方法的一个搜集总结。 背景 项目要求PC端浏览器播放HLS直播视频,并且不能使用Flash插件播放器[PS:听说给政府人员使用的,不允许浏览器下载插件...

一如初衷
2018/11/07
0
0
zymedia的在使用中碰到的问题

记笔记,免忘记!最近用到了视频插件zyMedia。这个插件的简介地址:https://github.com/ireaderlab/zyMedia 问题一: 首先视频的上方显示的标题,实例是这样写的data-config='{"mediaTitle":...

zilvzsy
2018/05/12
0
0
【前端帮帮忙】第6期 移动端使用video标签需要注意的一些问题

相信使用过标签的都知道,标签在pc端跟手机端显示的样式并不一样,而且还有个很蛋疼的就是微信中内置的浏览器,播放的时候会自动全屏问题。 接下来我们通过例子来分析下使用过程中可能碰到的...

大志_前端
05/10
0
0
【腾讯bugly干货分享】HTML 5 视频直播一站式扫盲

本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://bugly.qq.com/bbs/forum.php?mod=viewthread&tid=1277 视频直播这么火,再不学就 out 了。 为了紧跟潮流,本文将...

腾讯Bugly
2016/07/04
930
4
【腾讯Bugly干货分享】H5 视频直播那些事

本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57a42ee6503dfcb22007ede8 Dev Club 是一个交流移动开发技术,结交朋友,扩展人脉的社群,成员...

腾讯Bugly
2016/08/12
226
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Boot + Mybatis-Plus 集成与使用(二)

前言: 本章节介绍MyBatis-Puls的CRUD使用。在开始之前,先简单讲解下上章节关于Spring Boot是如何自动配置MyBatis-Plus。 一、自动配置 当Spring Boot应用从主方法main()启动后,首先加载S...

伴学编程
昨天
7
0
用最通俗的方法讲spring [一] ──── AOP

@[TOC](用最通俗的方法讲spring [一] ──── AOP) 写这个系列的目的(可以跳过不看) 自己写这个系列的目的,是因为自己是个比较笨的人,我曾一度怀疑自己的智商不适合干编程这个行业.因为在我...

小贼贼子
昨天
7
0
Flutter系列之在 macOS 上安装和配置 Flutter 开发环境

本文为Flutter开发环境在macOS下安装全过程: 一、系统配置要求 想要安装并运行 Flutter,你的开发环境需要最低满足以下要求: 操作系统:macOS(64位) 磁盘空间:700 MB(不包含 IDE 或其余...

過愙
昨天
6
0
OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
昨天
2.6K
16
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
昨天
42
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部