微信Android自动播放视频（可交互，设置层级，无控制条，非X5）ffmpeg,jsmpeg.js,.ts视频
原料：
ffmpeg : http://ffmpeg.zeranoe.com/builds/ win64
https://evermeet.cx/ffmpeg/ mac OS X 64
jsmpeg.js :https://github.com/phoboslab/jsmpeg
win 64版为例：
下载ffmpeg后,我解压到D盘 ffmpeg 目录 如下：
进入bin目录看到几个exe 这就是处理程序。
win+r 输入cmd 打开命令窗口，转到bin目录，并输入转码代码（相关参数请参看上面github作者地址）
in.mp4 是我们要原始视频 （这里我直接把视频放在 bin目录里）
回车运行后，bin目录输出out.ts
更多参数配置命令
ffmpeg -i 1.mp4 -f mpegts -codec:v mpeg1video -s 640x1040 -b:v 1500k -r -bf 0 -codec:a mp2 -ar -ac 1 -b:a 128k out.ts
原始视频 导出尺寸 导出码率 导出帧频 音频采样率 音频比特率
html代码
<body>
<canvas id="video-canvas"></canvas>
<script type="text/javascript" src="jsmpeg.min.js"></script>
<script type="text/javascript">
window.onload=function(){
var canvas = document.getElementById('video-canvas');
var url = 'out.ts';
//var url = 'ws://'+document.location.hostname+':8082/';
var player = new JSMpeg.Player(url, {canvas: canvas,loop: true, autoplay: true});
}
</script>
</body>
播放控制：
play() – start playback
pause() – pause playback
stop() – stop playback and seek to the beginning
destroy() – stops playback, disconnects the source and cleans up WebGL and WebAudio state. The player can not be used afterwards.
volume – get or set the audio volume (-)
currentTime – get or set the current playback position in seconds
例如 player.pause()
跨域问题
jsmpeg请求ts媒体文件，使用的是XMLHttpRequest，且同时使用了 setRequestHeader("Range", "bytes=xxxx"); 来请求切割数据，这样拿到我们设定 xxx 的字节的数据后，我们可以及时对数据进行处理（jsmpeg设置参数chunkSize就是这里的xxx）。
因为跨域，切割数据 服务器认为这是对文件进行二次操作所以被拒绝。
那么对服务进行配置一下 ：我这里使用的 iis 其他的应该一样
、
HTTP响应头 进入编辑 如下
以下2个都需要 Access-Control-Allow-Headers Access-Control-Expose-Headers 值 Content-Length,Range
注意：
1 清晰度和原视频差不多的条件下，码率几乎需要多设置1倍；
PS: ios 建议仍然使用video播放
微信Android自动播放视频（可交互，设置层级，无控制条，非X5）ffmpeg,jsmpeg.js,.ts视频的更多相关文章
- html5音频audio对象处理以及ios微信端自动播放和息屏后唤醒的判断---可供参考(功能都完整实现了,只是细节还没处理的很好)
// html模版中的 此处结合了weui样式整合的微信手机端片段代码(不可直接粘贴复制进行使用)里面含有一些php的写法,可直接略过..###重点参考js代码### <div> < ...
- 微信audio自动播放（ios播放问题）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS自动播放音频 无效chrome设置 （Uncaught (in promise) DOMException: play() failed because the user didn't interact）
Chrome的autoplay政策在2018年4月做了更改.新的行为:浏览器为了提高用户体验,减少数据消耗,现在都在遵循autoplay政策,Chrome的autoplay 政策非常简单 muted ...
- 实现微信浏览器自动播放MP3音乐
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 手机浏览器自动播放视频video（设置autoplay无效）的解决方案
1.问题的提出 某一天接了个需求,需要在手机的H5页面内加入视频,我开开心心做完,准备交付的时候,问题来了,PM想要用户一进入页面,视频就开始播放,不需要用户手动点击. 2.尝试解决 加autopla ...
- 在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- egret 篇——关于ios环境下微信浏览器的音频自动播放问题
前段时间公司突然想用egret(白鹭引擎)做一个金币游戏,大半个月边看文档边写吭哧吭哧也总算是弄完了.期间遇到一个问题,那就是ios环境下微信浏览器的音频自动播放问题. 个人感觉吧,egret自己封装 ...
- ios设置音乐audio自动播放
因为audio标签的自动播放:autoplay.在ios系统中不能自动播放,此时需要设置,在进入页面自动播放音乐. 第一步,先引入js微信 <script src="js/jweixi ...
- audio微信自动播放以及自定义样式
audio标签如下: <audio id="audioTag" src="" autoplay="autoplay" controls ...
随机推荐
- poj-2828 Buy Tickets（线段树，排队问题，逆向思维）
题目地址:POJ 2828 Buy Tickets Description Railway tickets were difficult to buy around the Lunar New Yea ...
- [原]调试实战——使用windbg调试excel启动时死锁
原调试debugwindbg死锁deadlock 前言 这是几年前在项目中遇到的一个死锁问题,在博客园发布过.我对之前的笔记进行了整理重新发布于此. 本文假设小伙伴们知道一些基本概念,比如什么是.du ...
- set|lambda|reduce
#!/usr/bin/python a=set([i for i in range(4,8)]) b=set([i for i in range(5,12)]) c= sorted(a & b ...
- Qt QThread必须要了解的几个函数
概述 如果想对Qt中的QThread有个更加深刻的了解,必须要知道这几个重要的函数,现在就一一介绍下. 函数介绍 属性 返回值 函数体 功能 static QThread * QThread::cur ...
- sqlserver中的数据导到mysql相关
一.在sqlserver中生成数据表脚本,粘贴到记事本中,如下语法要进行替换 1.int IDENTITY (1, 1) NOT NULL——>id int unsigned NOT NULL ...
- B-Tree索引
翻译自http://dev.mysql.com/doc/refman/5.6/en/index-btree-hash.html 理解B-Tree和Hash的数据结构能够帮助我们预测不同存储引擎下的查询 ...
- 吴裕雄--天生自然Android开发学习：1.2.2 使用Android Studio开发Android APP
1.下载Android Studio 官网下载:Android Studio for Window ... :http://developer.android.com/sdk/installing/s ...
- Ho|H1|p-value|p值与U值|单侧检验
生物统计学 统计推断的过程: Ho:XXXX会发生 H1:XXXX不会发生 p:XXXX会发生的概率(概率计算过程),如果是小概率,则H0不可能发生,所以拒绝H0接受H1. 概率计算过程:先设定小概率 ...
- python3之scrapy数据存储问题（MySQL）
这次我用的是python3.6,scrapy在python2.7,3.5的使用方法都不同所以要特别注意, 列如 在python3.5的开发环境下scrapy 的主爬虫文件可以使用 from urlli ...
- 博客已搬迁到 blog.vivym.xyz
博客已搬迁到 blog.vivym.xyz