七、H5 直播视频播放
HTML5实现视频直播功能思路详解_html5教程技巧_脚本之家 https://m.jb51.net/html5/587215.html
七、H5 直播视频播放
移动端iOS和 Android 都天然支持HLS协议,做好视频采集端、视频流推流服务之后,便可以直接在H5页面配置 video 标签播放直播视频。
<video controls preload=“auto” autoplay=“autoplay” loop=“loop” webkit-playsinline>
<source src=“http://10.14.221.8/hls/test.m3u8″ type=“application/vnd.apple.mpegurl” />
<p class=“warning”>Your browser does not support HTML5 video.</p>
</video>
八、总结
本文从视频采集上传,服务器处理视频推流,以及H5页面播放直播视频一整套流程,具体阐述了直播实现原理,实现过程中会遇到很多性能优化问题。
① H5 HLS 限制必须是H264+AAC编码。
② H5 HLS 播放卡顿问题,server 端可以做好分片策略,将 ts 文件放在 CDN 上,前端可尽量做到 DNS 缓存等。
③ H5 直播为了达到更好的实时互动,也可以采用RTMP协议,通过video.js 实现播放。
七、H5 直播视频播放的更多相关文章
- 前端开发:H5直播起航
前言 前不久抽空对目前比较火的视频直播,做了下研究与探索,了解其整体实现流程,以及探讨移动端HTML5直播可行性方案. 发现目前 WEB 上主流的视频直播方案有 HLS 和 RTMP,移动 WEB 端 ...
- H5直播避坑指南
本文来自"小时光茶社(Tech Teahouse)"公众号 作者简介: 文赫,2015年加入腾讯,作为前端开发工程师参与过手Q游戏公会,游戏中心,企鹅电竞等项目,具有丰富的移动端开 ...
- 一种微信直播H5直播与存储回放的HLS摄像机方案
接上篇 在上一篇博客<一种流量成本节省60%以上的手机直播微信直播H5直播幼儿园直播方案>中,我们一共介绍了两种省钱的HLS直播途径: 方案一:编码器或者内网推流直接对接云存储的场景 如果 ...
- 斗鱼 H5 直播原理解析,它是如何省了 80% 的 CDN 流量?
斗鱼直播相信大家都听说过,打开斗鱼官网就可以直接在浏览器中观看直播.那么斗鱼是如何实现浏览器视频直播的呢?本篇文章就来解析斗鱼是如何实现直播的,以及它是如何节省 80% 的 CDN 流量,要知道视频直 ...
- h5直播开发之旅总结
前言 关于直播,有很多相关技术文章,这里不多说. 作为前端,我们比较关心我们所需要的. 直播的大致流程: APP端调用摄像头 -> 拍摄视频 -> 实时上传视频 -> 服务器端获取视 ...
- 用vue开发一个app(4,一个久等了的文章)H5直播平台登录注册(1)
我上一篇关于vue的文章和这一篇时间隔了有点久了.最近终于写完了. 因为我一直想写个有点实绩的东西,而不是随便写一个教程一样东西.结合最近在项目中学到的经验和我的一点创意. 首先介绍下这是个什么! H ...
- h5直播
直播开发之旅 ① 状态控制: 目前我们先考虑直播的三种状态: 直播前,直播中,结束. 针对每个状态我们肯定会有不同的显示,这三种状态可以是三个页面,相互切换,或者一个页面,控制页面相关隐藏和显示. 可 ...
- EasyNVR H5直播流媒体解决方案前端构建之:如何播放自动适配RTMP/HLS直播播放
之前在进行EasyNVR多屏开发的时候,由于多屏功能不需要在手机端展示出来(pc多播放为RTMP,手机端播放为HLS),因此只注意到了引用videojs来进行rtmp的播放.由于不同项目需求不同,对h ...
- 视频技术详解:RTMP H5 直播流技术解析
本文聚焦 RTMP 协议的最精华的内容,接进行实际操作 Buffer 的练习和协议的学习. RTMP 是什么 RTMP 全称即是 Real-Time Messaging Protocol.顾名思义就是 ...
随机推荐
- 微信公众号弹出框在IOS最新系统中点击键盘上的“完成”导致事件无法触发问题
微信公众号弹出框在IOS最新系统中点击键盘上的"完成"导致事件无法触发问题 问题描述 微信公众号中有项功能是弹框模态框,输入信息后保存操作.但是在IOS系统中发现,当输入内容后,点 ...
- Python内置函数之repr()
repr(object) 返回对象的字符串形式. >>> a = 'hello' >>> repr(a) "'hello'" 返回的字符串形式可 ...
- 扫目录过狗过waf方法
用御剑的朋友都遇到过这个页面吧,装狗了开启保护就会这样 本机搭建安全狗设置发现,默认是过蜘蛛的,所以只要把http头来路改成蜘蛛的useragent就ok了 无奈御剑和wscan 都是无法设置http ...
- atn 编译java提示资源不足
今天用ant编译项目出现 [javac] 系统资源不足.的错误,如下 Buildfile: build.xml -compile: [javac] Compiling 919 source fi ...
- 有效提升大数据量写入excel的效率
在开发过程中经常会有需要将数据导出到 excel 的需求,当数据量很大,达到几万甚至几十万.几百万级别的时候,如何加快生成 excel 的速度呢?首先普及一下知识背景:Excel2003 及以下版本一 ...
- Nginx + PHP-FPM + MySQL + phpMyAdmin on Ubuntu (aliyun)
今天抽空在阿里云上部署安装了PHP的环境 主要有nginx, php5 php-fpm mysql phpmyadmin 本文来源于:http://www.lonelycoder.be/nginx-p ...
- javascript属性详解
在js中,没有公共属性和私有属性之分,只有全局变量(全局属性)和局部变量以及对象属性.但是,程序员可以通过一定的技巧来实现面向对象语言的功能.下面我们来介绍这几种属性(变量) 全局变量也叫全局属性 / ...
- SecureCRT中 secureCRT使用VIM时对语法高亮
1.在SecureCRT中 secureCRT使用VIM时对语法高亮 其实不是secureCRT的功能,而是VIM的 设置:Options ->Session Options -> Ter ...
- Java中的BlockingQueue小结
BlockingQueue是java.util.concurrent下的主要用来控制线程同步的工具. 主要的方法是:put.take一对阻塞存取:add.poll一对非阻塞存取. 插入: 1) add ...
- 常见sql 写法总结
关于如何获取1对多数据中最大条数据的写法 例子: LEFT JOIN ( SELECT * FROM table AS n1 WHERE n1.ID IN ( SELECT MAX(id) FROM ...