前端离职,让我写个视频播放页面,木办法只有我来搞了。

默认用h5的 video标签 测试时候发现微信浏览器内访问video自动全屏播放。

搜了下

webkit-playsinline="true" playsinline="true" x-webkit-airplay="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-ignore-metadata="true"

video内加如下属性可以解决ios全屏问题。但是安卓还是不行。网上说是安卓的用了x5内核啥的乱七不糟的,反正微信安卓浏览器对video做了限制了。

然后怎么办呢?想到用 canvas (最近做h5视频推流相关业务接触到的,里面有个jsmpeg视频解码插件)然后 jsmpeg (英文不好的可以用chrome的翻译功能帮你翻译这个地址)看了下说明。

要把视频转换为ts格式 又要用到  ffmpeg。转码mp4 为ts格式。(还好之前自己稍稍的研究过这个ffmpeg。不然要崩溃了。扯的太远了)

不管怎么样,还是有点崩溃。。。太费事了

首先利用ffmpeg转文件格式为 ts格式(ffmpeg这个安装我之前研究安装过,大家可以百度搜到,这里不细说,主要这个东西太复杂我也不咋深入了解)。命令如下

ffmpeg -i in.mp4 -f mpegts -codec:v mpeg1video -s 960x540 -b:v 500k -r  -bf  -codec:a mp2 -ar  -ac  -b:a 128k out.ts

其中1.mp4是原视频文件名称,out.ts是要转换成的视频名称,-r 25 意思是视频帧率是25(这里我设置的和原视频一样,原视频的这个参数可以用一些播放软件查看到它的编码信息,比如qq影音)-b:v 是指视频码率 越大越清晰(尽量小点,不然文件太大了,我这里设置了500k,清晰度还行) -s是分辨率,

上面做这些是因为 这句 jsmpeg git上的这句话  “JSMpeg只支持MPEG1视频编解码器和MP2音频编解码器的MPEG-TS容器播放”;还有一点ts文件可以带声音

生成后把此文件放到同你当前业务域名下的某个目录里(非当前域名的ts文件地址在用jsmpeg的时候会报跨域错误,应该jsmpeg里用到了post导致,不细究)

<canvas id="video-canvas"></canvas>
<script type="text/javascript" src="/jsmpeg.min.js"></script>
<script>
var canvas = document.getElementById('video-canvas');
var url = '/share/image/500p2.ts';
var player = new JSMpeg.Player(url, {canvas: canvas);
</script>

上面是jsmpeg的基本使用方法

到这里解决了,微信安卓浏览器的问题了。

——————————————————————————————————————————————————————————————

操蛋的是,ios上又播放不了声音,实在不想搞了,程序判断下内核,是安卓 的微信浏览器 用canvas方式的模板,其他一律用video方式的模板。

更操蛋的是,好不容易基本解决的时候,发现 各种Oppo  uc等等浏览器又出现一些小兼容问题。先到这里,待有空了再来细究。。。。

解决微信浏览器内video全屏问题的更多相关文章

  1. 点击图片video全屏

    <!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. 解决微信浏览器video全屏的问题

    解决微信浏览器video全屏的问题 在微信浏览器里面使用video标签,会自动变成全屏,改成下面就好了,起码可以在video标签之上加入其他元素. <video id="videoID ...

  3. 利用gulp解决微信浏览器缓存问题

    做了好多项目,这次终于要解决微信浏览器缓存这个令人头疼的问题了.每次上传新的文件,在微信浏览器中访问时,总要先清除微信的缓存,实在麻烦,在网上搜罗了很多解决办法,终于找到了方法:利用gulp解决缓存问 ...

  4. H5 video全屏与取消全屏兼容

    H5 video全屏与取消全屏各浏览器兼容,  requestFullscreen()全屏方法,exitFullscreen()退出全屏方法.兼容各个浏览器与css3兼容一样加个前缀即可. // 全屏 ...

  5. vue video全屏播放

    需求: 1.视频为长方形,页面初始化打开为横屏全屏播放视频. 2.微信不支持自动播放,故自动播放需求删除. 方法: 1.vue-video-player插件 因需求较简单,仅要求播放本地一个视频,故未 ...

  6. 实现微信浏览器内打开App Store链接(已被和谐,失效了)

    微信浏览器是不支持打开App Store 页面的,不知道微信为什么这么做.比如你页面写 <a href=”http://itunes.apple.com/us/app/id399608199″& ...

  7. 实现微信浏览器内打开App Store链接

    http://www.ildsea.com/1781.html 微信浏览器是不支持打开App Store 页面的,不知道微信为什么这么做.比如你页面写 <a href=”http://itune ...

  8. [转]实现微信浏览器内打开App Store链接

    微信浏览器是不支持打开App Store 页面的,不知道微信为什么这么做.比如你页面写 <a href=”http://itunes.apple.com/us/app/id399608199″& ...

  9. 微信浏览器内建的WeixinJSBridge 实现“返回”操作

    微信浏览器内建的WeixinJSBridge 实现“返回”操作 WeixinJSBridge.call('closeWindow');

随机推荐

  1. Let's Encryt免费SSL证书申请[我司方案]

    Let's Encrypt颁发的证书是目前生产的大多数浏览器都信任的,您只需下载并运行Let's Encrypt客户端来生成一个证书即可. 在颁发证书之前,需要验证您的域名的所有权.首先,在您的主机上 ...

  2. thinkphp empty标签

    empty标签用于判断某个变量是否为空,用法: 大理石平台检验标准 <empty name="name"> name为空值 </empty> 如果判断没有赋 ...

  3. thinkphp 三元运算

    模板可以支持三元运算符,例如: {$status?'正常':'错误'} {$info['status']?$info['msg']:$info['error']} 注意:三元运算符中暂时不支持点语法. ...

  4. 0920CSP-S模拟测试赛后总结

    依旧挂了. 这次出题人十分良心.白送了180分……于是我没有拿到.130分rank43滚粗了. T1是道sbdp.然而我死想哈希.然后就死在哈希上了. 我简直是个傻子.之前考了几次字符串的题可以用哈希 ...

  5. NOI2014

    听说14,15年的题是最简单的,然后除了提答以外的不那么水的题都是以前讲过.做过的,都比较好想到,但是我实现起来却有各种Bug,也完全不能在5h里AC...太弱了 [NOI2014]起床困难综合症 纯 ...

  6. MR/hive/shark/sparkSQL

    shark完全兼容hive,完全兼容MR,它把它们替代.类SQL查询,性能比hive高很多 sparkSQL比shark更快.shark严重依赖hive,hive慢,无法优化. SparkSQL和sh ...

  7. Python 实现0-1背包

    代码: import numpy as np c=10 #背包容量 w=[2,2,6,5,4] #物品重量 v=[5,3,5,4,6] #物品价值 flag =[0,0,0,0,0] m=np.zer ...

  8. Vue .sync修饰符与$emit(update:xxx)写法问题

    在学习vue自定义事件的.sync修饰符实现改变数值时发现一个问题如下由于props的大小写命名:fatherNum,对应不同的$emit()会有不同的效果,具体如下: 使用.sync修饰符,即 // ...

  9. 批量处理数据 SqlBulkCopy

    string connectionString = new PublicDBHelper().GetCon(System.Configuration.ConfigurationManager.AppS ...

  10. oracle 如何在一个数据库创建多个实例

    实例:是一个非固定的.基于内存的基本进程与内存结构.当服务器关闭后,实例也就不存在了. 数据库(Database)指的是固定的.基于磁盘的数据文件.控制文件.日志文件.参数文件和归档日志文件等. 一般 ...