原料：

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. PictureService

    package me.zhengjie.tools.service; import me.zhengjie.tools.domain.Picture; import org.springframewo ...

  2. for in 循环获取json中的键（key）与值（value）

    一 .for in 循环 1.获取json中的键(key)与值(value): var data = {name:'张三',age:'20岁',sex:'男'}; for (var a in data ...

  3. VisualStudioAddIn2017.vsix的下载安装和使用

    本加载项是用于Visual Studio的,下载以后按照如下步骤进行安装: 完全退出Visual Studio 把下载了的文件解压缩,会产生一个VisualStudioAddIn2017.vsix文件 ...

  4. 在SpringBoot中使用Junit测试

    一:加入依赖 <dependency> <groupId>junit</groupId> <artifactId>junit</artifactI ...

  5. ReactJS - 组件的生命周期

    组件的生命周期分为三个状态 Mounting: 已插入真实DOM Updateing: 正在被重新渲染 Unmounting: 已移出真实DOM React 为每个状态都提供了两种处理函数,即函数在进 ...

  6. linux系统--C语言程序开发的基本步骤（包含gcc的基本步骤）

    1.使用vi或者vim编写程序文件 2.使用gcc把所有的源文件翻译成计算机认识的格式(编译) 3.使用./a.out作为命令执行得到的可执行文件 gcc编译器的工作步骤: 1.处理所有的预处理指令 ...

  7. svn使用2（转）

    首先打开VisualSVN Server Manager,如图: 可以在窗口的右边看到版本库的一些信息,比如状态,日志,用户认证,版本库等.要建立版本库,需要右键单击左边窗口的Repositores, ...

  8. [LC] 287. Find the Duplicate Number

    Given an array nums containing n + 1 integers where each integer is between 1 and n (inclusive), pro ...

  9. [LC] 225. Implement Stack using Queues

    Implement the following operations of a stack using queues. push(x) -- Push element x onto stack. po ...

  10. geoserver整合swagger2支持自动生成API文档

    网上各种博客都有关于swagger2集成到springmvc.springboot框架的说明,但作者在整合到geoserver中确碰到了问题,调试一番最后才解决,遂总结一下. swagger2集成只需 ...