PC、手机web页面直播hls视频
2017-11-18 16:45
441 查看
PC、手机web页面直播hls视频
概述
一转眼就到了11月,很多工作中遇到的坑都在一一解决,仔细想了想值得分享的应该是web页面直播hls格式的视频了,当时我们的项目是需要在手机嵌入的页面来播放摄像头的视频,视频格式是hls直播流,HTML5的video标签并不能直接播放hls直播流,需要借助插件来实现。关于插件的话网上也搜了一大堆用来测试,发现免费还好用的应该算是video.js了,video.js也是专门针对hls直播流做了一个依赖video.js的插件videojs-contrib-hls.js。前端页面同时引入这两个js插件就可以播放hls直播流。
注意
当然播放也是有需要注意的地方:后端传过来的播放文件地址是以 *.m3u8为后缀,关于hls转换m3u8这里就不介绍了,因为我只是做前端的,对这个不了解
前端进行hls直播需要启动server才可以,不然直接播放会报错,我用的是eclipse
hls直播有延迟,我们的是大约15秒,然后每次地址可以播放30s,我就用定时器调用接口来实现不间断直播
代码块
好了,废话不多说,直接上例子,例子也是video.js官网的:<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link href="https://cdn.bootcss.com/video.js/6.3.3/video-js.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/video.js/6.3.3/video.min.js"></script> <script src="https://cdn.bootcss.com/videojs-contrib-hls/5.11.0/videojs-contrib-hls.js"></script> </head> <body> <video id="example-video" width=960 height=540 class="video-js vjs-default-skin" controls poster="http://i.onionstatic.com/onionstudios/3819/16x9/800.jpg"> <!--<source src="http://7xjr0i.com2.z0.glb.qiniucdn.com/test-vedio-hls.m3u8" type="application/x-mpegURL">--> <!--<source src="API/hls_test/hls_test/output.m3u8" type="application/x-mpegURL">--> <source src="http://7xjr0i.com2.z0.glb.qiniucdn.com/test-vedio-hls.m3u8" type="application/x-mpegURL"> </video> <script type="text/javascript"> var player = videojs('example-video'); //player.play(); </script> </body> </html>
链接
也有在线测试的地址:http://jsbin.com/meqeqipaye/edit?html,output
video.js里有很多格式的视频播放解决方案,需要的可以看一下:
https://github.com/videojs
翻博客看到boonya写的一个视频直播项目流程比较详细,推荐下(2017-11-22更新):
http://blog.csdn.net/boonya/article/details/52210576
相关文章推荐
- 关于如何在PC上调试手机X5内核浏览器下的WEB页面
- webapp设置适应pc和手机的页面宽高以及布局层叠图片文字
- webapp设置适应pc和手机的页面宽高以及布局层叠图片文字
- 移动web HLS:HTML5 视频直播介绍
- FMS直播,在PC和手机PAD同时接收直播(使用RTMP和HLS协议)
- 手机WEB页面打开QQ聊天
- 手机访问本地开发web页面(http-server的配置)
- Webview--如何让加载进来的页面自适应手机屏幕分辨率居中
- 使用手机查看pc本地服务器的页面
- 利用nginx搭建RTMP视频点播、直播、HLS服务器
- 手机页面操作栏的创建及WebFont的使用
- 基于HLS(HTTP Live Streaming)的视频直播分析与实现
- 手机页面左右漂浮, PC端没有滚动条的抓狂问题
- 手机Android音视频采集与直播推送,实现单兵、移动监控类应用
- java后台判断客户端是手机/PC并返回不同页面的实例
- 利用nginx搭建RTMP视频点播、直播、HLS服务器
- 手机Android音视频採集与直播推送,实现单兵、移动监控类应用
- 做一个php登陆页面,用pc登陆和用手机登陆弹出来的登陆页面不一样。
- VS2013 MVC Web项目使用内置的IISExpress支持局域网内部机器(手机、PC)访问、调试
- HTTP Live Streaming (HLS) 视频直播技术