原料：

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视频的更多相关文章

  1. html5音频audio对象处理以及ios微信端自动播放和息屏后唤醒的判断---可供参考(功能都完整实现了,只是细节还没处理的很好)

    // html模版中的 此处结合了weui样式整合的微信手机端片段代码(不可直接粘贴复制进行使用)里面含有一些php的写法,可直接略过..###重点参考js代码### <div> < ...

  2. 微信audio自动播放（ios播放问题）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. JS自动播放音频 无效chrome设置 （Uncaught (in promise) DOMException: play() failed because the user didn't interact）

    Chrome的autoplay政策在2018年4月做了更改.新的行为:浏览器为了提高用户体验,减少数据消耗,现在都在遵循autoplay政策,Chrome的autoplay 政策非常简单 muted ...

  4. 实现微信浏览器自动播放MP3音乐

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 手机浏览器自动播放视频video（设置autoplay无效）的解决方案

    1.问题的提出 某一天接了个需求,需要在手机的H5页面内加入视频,我开开心心做完,准备交付的时候,问题来了,PM想要用户一进入页面,视频就开始播放,不需要用户手动点击. 2.尝试解决 加autopla ...

  6. 在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. egret 篇——关于ios环境下微信浏览器的音频自动播放问题

    前段时间公司突然想用egret(白鹭引擎)做一个金币游戏,大半个月边看文档边写吭哧吭哧也总算是弄完了.期间遇到一个问题,那就是ios环境下微信浏览器的音频自动播放问题. 个人感觉吧,egret自己封装 ...

  8. ios设置音乐audio自动播放

    因为audio标签的自动播放:autoplay.在ios系统中不能自动播放,此时需要设置,在进入页面自动播放音乐. 第一步,先引入js微信 <script src="js/jweixi ...

  9. audio微信自动播放以及自定义样式

    audio标签如下: <audio id="audioTag" src="" autoplay="autoplay" controls ...

随机推荐

  1. Normal Probability Plots|outlier

    6.4 Assessing Normality; Normal Probability Plots The normal probability plot is a graphical techniq ...

  2. dubbo服务调用

    1.Dubbo的缺省(默认)协议:采用单一长连接和NIO异步通讯. 2.  3.调用关系说明 0. 服务容器负责启动,加载,运行服务提供者. 1. 服务提供者在启动时,向注册中心注册自己提供的服务. ...

  3. [LC] 5. Longest Palindromic Substring

    Given a string s, find the longest palindromic substring in s. You may assume that the maximum lengt ...

  4. python学习笔记（7）数据类型转换

  5. VB.Net制作-历朝通俗演义

    原先的回数,全是汉语数字,为此我先转换成了阿拉伯数字,遗憾的是阿拉伯数字100居然排在1和2之前!所以必须设置为3位数字才行!否则顺序是乱的. 以下是用VBA批量重命名的代码: Dim FSO As ...

  6. 牛客-DongDong数颜色 及其相似题

    大佬博客 ps:在牛客上做到这题不会,学会之后补了两道相关题.顺便记录一下. 牛客-DongDong数颜色 sol:dfs序+莫队,先把树上的点标上dfs序,因为子树的dfs序是连续的,所以子树可以表 ...

  7. 第一课 安装wamp环境

    1.准备 怎样选择PHP的版本 IIS 如果想使用IIS配置PHP的话,那么需要选择Non-Thread Safe(NTS)版本的PHP Apache 如果你是用的Apache的版本来自Apache ...

  8. 一致性 hash 算法（ consistent hashing ）及java实现

    consistent hashing 算法早在 1997 年就在论文 Consistent hashing and random trees 中被提出,目前在cache 系统中应用越来越广泛: 1 基 ...

  9. js - __proto__ 、 prototype和constructor

    零.资料与前言 0x1 材料: 1.帮你彻底搞懂JS中的prototype.__proto__与constructor(图解) 0x2 前言 之前也尝试总结过 js 中的 __proto__ . pr ...

  10. python 3新式类的多继承

    因为我用的是python3,所以所用到的类都是新式类,这里我说的都是新式类,python2类的继承复杂一些,主要有新式类和老式类.python3类(新式类)的继承是是广度优先(BFS),实例如下: c ...