关闭

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

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

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

关闭

web视频播放

毫无疑问,现在是短视频、直播的时代。视频内容逐渐代替图文形式成为网友们获取新鲜事物以及展现自我的一大媒介。随着5G的到来,2020年属于直播短视频爆发式增长的一年,电商平台也都涌入直播营销的大风口

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

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

HTML5 向网页嵌入视频和音频

现在很多网站上都会使用到视频和音频,HTML5 中提供了展示视频和音频的标签。向网页嵌入视频可以使用 <video> 标签,而嵌入音频可以使用 <audio> 标签

js获取上传音视频的时长

获取上传视频路径,将该路径放入video标签,获取视频时长。方式一:隐藏一个音频标签,播放获取。方式二;通过new Audio的方式获取。上传之前限制一下视频的时长

h5页面自动播放视频、音频_关于媒体文件自动全屏播放的实现方式

在移动端(ios和android)播放视频的时候,我们即使定义了autoplay属性,仍然不能自动播放。这是由于手机浏览器为了防止浪费用户的网络流量,在默认情况下是不允许媒体文件自动播放的,除非用户自己对浏览器进行设置才能支持autoplay。

价值2580元廖雪峰前端视频,终终终于免费啦!

vue是国内最常用的前端框架,作者是尤雨溪大佬中文资料多,而且上手快,生态繁荣,是新手入门的首选框架。即将更新到3.0版本,追赶技术浪潮 进大厂就靠它啦

Bideo.js实现全屏视频背景

想在你的网页首页中全屏播放一段视频吗?而这段视频是作为网页的背景,不影响网页内容的正常浏览。那么我告诉你有一款Javascript库正合你意,它就是Bideo.js。

DPlayer简单用法

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

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

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

使用 multipart/x-mixed-replace 实现 http 实时视频流

关于实时视频传输,业界已经有非常多成熟方案,分别应用在不同需求场景。本文介绍一种基于 HTTP ,非常简单、易理解的方案,实用性不强,但有助于理解 HTTP 协议。

点击更多...

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