原料：

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. mysql之结果集去重

    mysql操作中,经常会遇到对结果集的去重 本篇文章列出几种应对办法: 1.使用distinct做去重,测试了一下,DISTINCT可以支持多列去重 select DISTINCT user_id_t ...

  2. IntelliJ IDEA项目断开版本管理解决方案

    今天使用idea时打开项目突然发现项目不受svn管理(项目目录依然受svn管理,只是idea脱管了),如遇到可用以下方法: 图片示例: 1. 2. 希望能帮到你

  3. [LC] 78. Subsets

    Given a set of distinct integers, nums, return all possible subsets (the power set). Note: The solut ...

  4. [LC] 19. Remove Nth Node From End of List

    Given a linked list, remove the n-th node from the end of list and return its head. Example: Given l ...

  5. 82）PHP，基本框架类步骤

    framework.class.php 基本代码展示: <?php /** * 框架初始化功能类 */ class Framework { /** * 入口 * 里面的static和self是一 ...

  6. Sampling Error|Sampling mean|population mean

    7.1 Sampling Error; the Need for Sampling Distributions 样本均值的三种表达: Sampling distribution of the samp ...

  7. 如何消除img间的默认间隙

    方案一:div{font-size:0};方案二:img{ display:block};方案三:img{vertical-align:top;}方案四:div{ margin-bottom:-3px ...

  8. isdigital()函数

    函数说明: 主要用于检查其参数是否为十进制数字字符. 头文件: C——#include<ctype.h> C++——#include<cctype> 函数定义:  int is ...

  9. SpringCloud快速搭建

    1.SpringCloud 为开发人员提供了快速构建分布式系统的一些工具,包括配置管理.服务发现.断路器.路由.负载均衡.微代理.事件总线.全局锁.决策竞选.分布式会话等等.它运行环境简单,可以在开发 ...

  10. Java枚举的作用和用法

    从没有枚举的时代说起 在枚举出现之前,如果想要表示一组特定的离散值,往往使用一些常量.例如: [Java] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 ...