javascript JSMpeg.js 播放视频解决不用全屏也能播放(也支持自动播放哦)
javascript JSMpeg.js 播放视频解决不用全屏也能播放(也支持自动播放哦)
缺陷就是 因为采用的是 MPEG1解码器 所以清晰度有点低 做直播可以考虑下 如果要清晰度高点 可以采取序列帧播放 前面图片加载好 后面边播放边加载 具体看http://newmiracle.cn/?p=2860
<pre>
JSMpeg Stream Client
<style type="text/css">
html,
body {
background-color: #111;
text-align: center;
}
</style></pre>
<canvas id="video-canvas"></canvas> <script src="/moban/js/jquery.min.js"></script> <script type="text/javascript" src="/jsmpeg/jsmpeg.min.js"></script> <script type="text/javascript">
$(function() {
var canvas = document.getElementById('video-canvas');
var player = new JSMpeg.Player('/\shipinmoban/mp4/out.ts', { canvas: canvas});
player.play();
var playvideotimer=setInterval(function(){
var currentTime=player.currentTime;
console.log(currentTime);
if(currentTime>=3){
clearInterval(playvideotimer)
player.destroy();
$('canvas').remove();
}
},60)
})
</script>
<pre>ffmpeg -i 1.mp4 -f mpegts -codec:v mpeg1video -s 640x1040 -b:v 1500k -r 30 -bf 0 -codec:a mp2 -ar 44100 -ac 1 -b:a 128k out.ts
</pre>
<img class="alignnone size-medium wp-image-3087" src="http://newmiracle.cn/wp-content/uploads/2018/02/TIM截图20190304170539-300x37.png" alt="TIM截图20190304170539" width="300" height="37" />
ps:
1 可能右边会有白边需要设置width:103%
2 play前需要3秒钟 不然会有黑屏
javascript JSMpeg.js 播放视频解决不用全屏也能播放(也支持自动播放哦)的更多相关文章
- [转]Android WebView播放视频(包括全屏播放),androidwebview
Android WebView播放视频(包括全屏播放),androidwebview 最近项目开发中用到了WebView播放视频的功能,总结了开发中犯过的错误,这些错误在开发是及容易遇到的,所以我这里 ...
- android 播放视频时切换全屏隐藏状态栏
1. Demo: @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstance ...
- html5--移动端视频video的android兼容,去除播放控件、全屏等
html5 中的video 在手机浏览器中的总结所有页面播放时, 如果选择全屏播放, 播放画面将浮动到屏幕的最上层 IOS 手机 自动播放 播放界面浮动文字 播放时是否自动全屏 能否嵌入在页面中播 ...
- WPF解决界面全屏化但不遮挡任务栏的问题
原文:WPF解决界面全屏化但不遮挡任务栏的问题 学习C#有一段时间了,现在跟着做项目,碰到有个客户端界面总是全屏,对于客户来说没有任务栏很不习惯,所以做了些略微的修改 </pre>&l ...
- 微信Android自动播放视频(可交互,设置层级,无控制条,非X5)ffmpeg,jsmpeg.js,.ts视频
原料: ffmpeg : http://ffmpeg.zeranoe.com/builds/ win64 https://evermeet.cx/ffmpeg/ mac OS X 64 jsmp ...
- H5移动端视频问题(苹果全屏播放问题等)
iphone上,手动.自动.窗口化等问题 iphone窗口化 解决方案: 通过canvas + video标签结合处理 原理: 获取video的原图帧,通过canavs绘制到页面. 我们一般在苹果上在 ...
- jquery序列帧播放(支持视频自动播放和不是全屏播放)
jquery序列帧播放 这个弊端就是到时候需要升级下带宽 至少10MB 保证不卡.. ae导出序列真的时候 每秒10帧 就是代码每秒播放10张图片 尺寸适当的可以压小点<pre> < ...
- 解决H5微信浏览器中audio兼容-- 背景音乐无法自动播放
我们知道,ios 在safari浏览器中,audio标签不能在没有用户交互的情况下自动播放或有js直接控制播放,这是系统限制的一些原因. 但是背景音乐在微信浏览器可以设置自动播放,config配置一下 ...
- IOS(苹果手机)使用video播放HLS流,实现在内部播放及全屏播放(即非全屏和全屏播放)。
需求: 实现PC及移动端播放HLS流,并且可以自动播放,在页面内部播放及全屏播放功能. 初步:PC及安卓机使用hls.js实现hls流自动播放及全屏非全屏播放 首先使用了hls.js插件,可以实现在P ...
随机推荐
- js 判断对象是否为空
利用JSON.stringify var objData = {};JSON.stringify(objData) ==="{}" // true 第二种用原声js 方法 Obje ...
- ini 文件操作指南
今天总结一篇工具箱文章. ini 类型文件通常作为程序的初始化文件.不同于我们常见的配置文件通篇 key-value 的键值对形式,ini 文件在键值对的基础之上还有分类节点,比如我们常见的 Mysq ...
- 引入flask_cache时出现ModuleNotFoundError: No module named 'flask.ext'
环境: centos 7.3 python 3.6 flask 1.0.2 flask-cache 0.13.1 引入flask_cache后运行时,出现以下错误 Traceback (most re ...
- 声学回声消除(Acoustic Echo Cancellation)
回声就是声音信号经过一系列反射之后,又听到了自己讲话的声音,这就是回声.一些回声是必要的,比如剧院里的音乐回声以及延迟时间较短的房间回声:而大多数回声会造成负面影响,比如在有线或者无线通信时重复听到自 ...
- mfc字符转码
std::wstring UTF8ToUnicode(const std::string& utf8string) { , utf8string.c_str(), -, NULL, ); ...
- Mqtt-Client
客户端选择:paho MQTT client. 使用vs2013编译成库 需要用到paho-mqtt3a库和paho-mqtt3c库.
- MS08-067 远程执行代码 漏洞复现
漏洞编号:MS08-067 披露日期: 2008/10/22 受影响的操作系统:Windows 2000;XP;Server 2003;Server 2008; 目标系统 Microsoft(R) ...
- python爬取旅游数据+matplotlib简单可视化
题目如下: 共由6个函数组成: 第一个函数爬取数据并转为DataFrame: 第二个函数爬取数据后存入Excel中,对于解题来说是多余的,仅当练手以及方便核对数据: 后面四个函数分别对应题目中的四个m ...
- Unity - HasExitTime用法
本文详细分析了AnimatorController中动画切换过渡问题,即Translation过渡及hasExitTime的问题.方法为对实际项目中的所有情况进行分类,规划逻辑图,可视化分析解决这些问 ...
- Nginx 了解一下?
这篇文章主要简单的介绍下 Nginx 的相关知识,主要包括以下几部分内容: Nginx 适用于哪些场景? 为什么会出现 Nginx? Nginx 优点 Nginx 的编译与配置 Nginx 适用于哪些 ...