原料：

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. ionic3 发布订阅者模式实现

    在ionic3 中实现订阅发布模式,需要用到Events. Events下面有三个方法 events.subscribe()  订阅 events.publish()  发布 events.unsub ...

  2. js - 观察者模式与订阅发布模式

    零.序言 转载&参考: 1.JavaScript 设计模式系列 - 观察者模式 2.JavaScript 设计模式(六):观察者模式与发布订阅模式 一.观察者模式(observer) 概要: ...

  3. thinking in java学习笔记：14章 类型信息

    14.2 Class 对象 https://github.com/zhaojiatao/javase 1.什么是Class对象,Class对象是用来做什么的? Class对象是java程序用来创建类的 ...

  4. Flask的Jinja2模版过滤器

    Jinja2模版过滤器 过滤器是通过管道符号(|)进行使用的,例如:{{ name|length }},将返回name的长度.过滤器相当于是一个函数,把当前的变量传入到过滤器中,然后过滤器根据自己的功 ...

  5. CCD （电荷耦合元件）

    CCD 是指电荷耦合器件,是一种用电荷量表示信号大小,用耦合方式传输信号的探测元件,具有自扫描.感受波谱范围宽.畸变小.体积小.重量轻.系统噪声低.功耗小.寿命长.可靠性高等一系列优点,并可做成集成度 ...

  6. Qt error C2338: No Q_OBJECT in the class with the signal错误解决办法（无法编译过信号与槽）

    由于没有继承QObject类而引起的 只需继承QObject类即可 如果已经继承了QObject类,编译还出现错误 将QObject类放在最前面继承:public QObject 最后即可编译通过

  7. 方差分析|残差|MSA/MSE|Completely randomized design|Randomized block design|LSD|主效应|intercept|多重比较|

    符合方差分析的三个条件: 残差=实际值-预测值(其实是均值). 在原假设下,MSA的期望会等于MSE的期望:在备选假设下,MSA的期望会大于MSE的期望,所以MSA/MSE的取值范围在(1,正无穷), ...

  8. linux一些基本操作-防火墙操作

    防火墙操作 一.service方式 查看防火墙状态: [root@centos6 ~]# service iptables status iptables:未运行防火墙. 开启防火墙: [root@c ...

  9. curl操作和file_get_contents() 比较

    1 . curl需要php开启php_curl开启扩展 $ch = curl_init(); $timeout = 5; curl_setopt ($ch, CURLOPT_URL, 'http:// ...

  10. proxmox新版本使用了lxc容器,导致以前的vzlist命令无法使用,于是自己写了一个脚本来获取所有半虚拟化主机的信息状态

    #!/usr/bin/env python #encoding:utf-8 # desc:用来描述各个主机信息 import os #CTID NPROC STATUS IP_ADDR HOSTNAM ...