关闭

移动端视频h5表现问题汇总

时间: 2019-02-14阅读: 1549标签: 视频

1. 同屏播放视频

<video src="" x-webkit-airplay="true" webkit-playsinline="true" playsinline />

 

2. 移动端视频预加载

由于移动端不能预加载视频,所以hack一种方案:监听WXjsBridge WeixinjsBridgeReady,先播放再暂停,这样当触发播放视频时就不用等待,就不会出现黑屏情况。

// 预加载视频hack
function preload() {
    document.getElementById('video').play();
    setTimeout(function () {
        document.getElementById('video').pause();
    }, 200);                 
}
document.addEventListener("WeixinJSBridgeReady", preload, false);

3. 滑动播放视频

 微信安卓环境下需要在touchmove事件中阻止掉默认事件,否则不能触发视频播放   

// 滑动或点击播放视频
ele.addEventListener('touchmove', function (event) {
    event.preventDefault();
});
ele.addEventListener('touchend', function () {
    video.play();
})


4. 微信安卓下视频异常表现(由于安卓机型众多,这里测试过部分机型基本都会出现)

 由于微信安卓版本基于x5内核,视频会出现全屏按钮,而且去不掉,会误导用户点击,所以一个想法是在微信环境下将视频一帧帧绘制到canvas上,缺点是低端机型可能会出现花屏情况。

且微信安卓环境下视频播放时,整个页面如果有bgm,也会暂停bgm,当视频播放完毕时,才会继续播放视频;ios下不会。

// 绘制视频到canvas
function video2canvas(){
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');//获取绘图环境
    var video = document.getElementsByTagName('video')[0];
    video.play();
    video.addEventListener('play', function(){
        setInterval(function(){
            ctx.drawImage(video, 0, 0, 200, 200);
        }, 20);
    });
}
部分机型开始播放出现黑屏(当 currentTime 更新时会触发 timeupdate 事件)。
video.addEventListener('timeupdate', () => {
    // 当视频的currentTime大于0.1时表示黑屏时间已过
    if (video.currentTime > 0.1) {
        // 去掉视频上的浮层
    }
})

安卓下由于由x5内核接管,视频位于页面最顶部,播放完可能会有推广视频,所以在视频播放完需要移除掉视频;也可以监听ended事件。

video.addEventListener('timeupdate', () => {
    // 兼容x5,时间为视频时长
    if (video.currentTime > 10) {
        // 移除视频
    }
}, false)
video.addEventListener('ended', () => {})

5.  视频压缩

利用高质量的H264+AAC视频压制,压缩率高达80%(https://maruko.appinn.me/)

 

6. 视频参数

获取当前播放时间点:video.currentTime,也可以直接设置 video.currentTime 的值来控制播放进度;

视频静音:muted;

默认样式:controls;


来自:https://www.cnblogs.com/colima/archive/2019/02/14/10306784.html

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/2016

关闭

Video Renderer:高性能移动 Web 端视频编辑器

Video Renderer 是一款针对移动 Web 应用开发的高性能视频编辑器。在 2019 伦敦全栈工程师大会( Fullstack London 2019 conference )上, Threads Styling 公司的软件开发工程师Forbes Lindesay 分享了 Video Renderer 的开发经验。

DPlayer简单用法

DPlayer 是一个支持弹幕的 HTML5 视频播放器。支持 Bilibili 视频和 danmaku,实时视频(HTTP Live Streaming,M3U8格式)以及 FLV 格式

video.js切换视频源问题

什么要再重新load一下什么替换一下src,没有啥作用,简单粗暴又有效的方法,video的问题,单单替换source的src是不行的,简单明了重新替换整个video标签,将video用js重新替换一遍,更改src

H5视频交互

在uc浏览器和ios微博里面,是不支持视频交互的,暂时没有办法把层级放在视频上方,IOS 必须用click事件点击之后视频才会播放,不支持自动播放 安卓环境下,视频播放会全屏播放,播放完之后不会回到原页面

h5视频播放踩坑记录

随着抖音、快手这类的视频类app的火爆,移动端h5视频类应用也随之兴起,使用video播放的场景也越来越多,本篇文章主要例举了移动端视频播放的一些场景和个人在开发过程中遇到的一些问题

优化 MP4 视频以便更快的网络串流

随着 Flash 的落寞 以及 移动设备的爆发性增长 ,越来越多的内容以 HTML5 视频的方式传递。在上一篇文章中你甚至能看到 使用 HTML5 视频替换 GIF 动图来优化网站访问速度 这样的技巧

视频全屏弹幕实现

这个问题如果思路错了就是个死胡同。所以我在找问题的时候趟了很多坑。思路错在我不应该使用视频的全屏,敲黑板!划重点啦!不要使用视频的全屏!(解决了问题的时候才幡然醒悟)

如何实现沉浸式视频体验?

沉浸式视频体验,大致内容是一个页面里有几十个视频,用户点击其中一个视频时,该视频自动滑动到屏幕可视区域的顶部开始播放,并暂停其他视频,该视频滑出屏幕可视区域之后要自动暂停。

聊聊 Web 视频播放的画中画模式

Chrome 在升级到 70 的时候开始对视频播放的画中画模式开始支持了,用户在浏览器 Web 页面可以通过 画中画的形式强当前画面停留在屏幕正上方,无论你在使用其他软件还是切到其他 Tab ,都可以看到当前画面

如何将视频设置为网页背景【转】

有时候为一个网页添加一个动画效果的背景,会让网页增加一定的韵味,让网页看起来与众不同。需要用到了video/标签,然后在source里面写视频的路径,autoplay用来使其自动播放,muted用来使其静音,loop为循环播放

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!