一、简介

如果要让网页支持在所有浏览器上播放，就需要使用第三方的播放器。VideoJs是一个较好的播放器库，完全免费，不像JWPlayer一样需要付费才能使用一些高级功能。

videojs播放库是比较有名的一个播放库，它不仅支持hls也支持rtmp，不过如果是播放rtmp它最终也是通过flash插件完成的，我们暂时只看hls。

二、实现

如果使用videojs播放hls前端代码实现如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><link href="https://vjs.zencdn.net/7.6.6/video-js.css" rel="stylesheet" /><!-- If you'd like to support IE8 (for Video.js versions prior to v7) --><script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script></head><body><videoid="my-video"class="video-js  vjs-big-play-centered"controlspreload="auto"width="640"height="264"data-setup="{}"><source src="http://192.168.12.187:8080/live/1.m3u8" type="application/x-mpegURL"/><p class="vjs-no-js">请升级您的浏览器之后在看该视频!<a href="https://videojs.com/html5-video-support/" target="_blank">支持H5视频标签</a></p></video><script src="https://vjs.zencdn.net/7.6.6/video.js"></script></body>
</html>

经过测试videojs播放HLS延迟大概在8s左右，不过也是非常的流畅，如果要定制自己的播放器可以参考如下代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>videojs自定义播放器</title><link href="./css/bootstrap.min.css" rel="stylesheet"><script type="text/javascript" src="./js/jquery.min.js"></script><link href="./videojs/video-js.css" rel="stylesheet"><script src="./videojs/video.js"></script><script src="./videojs/videojs-contrib-hls.min.js"></script>
</head><body><center><video id=example-video width=600 height=300 class="video-js vjs-default-skin" controls></video><div class="input-group" style="margin-top: 10px; width: 740px;"><input type="text" name="stream_address" id="stream_address" required autofocusplaceholder="input HLS Stream Address 注意不要含有空格" class="form-control"><span class="input-group-btn input-btn"><button class="btn btn-default" id="form_button" type="button">提交</button></span></div></center><script type="text/javascript">var default_hls_address = 'http://192.168.12.187:8080/live/1.m3u8';var options = {width: 1280,height: 720,poster: "../image/video-background.jpg",autoplay: true,controls: true,loop: true,preload: 'auto',sourceOrder: true,sources: [{src: default_hls_address,type: 'application/x-mpegURL'}, {src: '//path/to/video.webm',type: 'video/webm'}],techOrder: ['html5', 'flash'],flash: {swf: 'videojs/video-js.swf'}}var player = videojs('example-video', options);player.addClass('vjs-matrix');player.on(['loadstart', 'play', 'playing', 'firstplay', 'pause', 'ended', 'adplay', 'adplaying', 'adfirstplay', 'adpause', 'adended', 'contentplay', 'contentplaying', 'contentfirstplay', 'contentpause', 'contentended', 'contentupdate'], function (e) {//        console.warn('VIDEOJS player event: ', e.type);if (e.type == "play") {console.log('开始播放');} else if (e.type == "playing") {console.log('正在播放...');} else if (e.type == "pause") {console.log('暂停视频播放');} else if (e.type == "firstplay") {console.log('firstplay播放');} else {console.log('1111111111111');}});$(function () {$("#form_button").click(function () {var msg = $("#msg");stream_address = $('input[name="stream_address"] ').val();console.log(stream_address);if (stream_address == "") {$('#stream_address ').css("border", "1px #ff0000 solid");msg.text("请输入媒体流地址");msg.addClass("warning");return false;} else {$('#stream_address').css("border", "1px #ff00ff solid");msg.text("error");msg.removeClass("warning");}$('#stream_address_code ').html("\"" + stream_address + "\"");player.src({src: stream_address,type: "application/x-mpegURL"});});});console.log(stream_address);</script>
</body>
</html>

源码获取、合作、技术交流请获取如下联系方式：
QQ交流群：961179337

微信账号：lixiang6153
公众号：IT技术快餐
电子邮箱：lixx2048@163.com

H5播放HLS之videojs播放视频相关推荐

h5 rtmp推荐控件_H5播放Rtmp之videojs播放
一.简介我们看到了HLS播放视频实时性非常差,好的在6-7s,差点的就要10-12s了,也就是人走了,估计视频上还能看到,这对观感效果造成了很大的影响!但是好处就是它是基于http协议文件下载的,所 ...
Ios html5 dplayer,H5播放HLS之DPlayer播放
一.创建vue项目http://dplayer.js.org/guide.html DPlayer使用是基于vue的,所以先安装vue并创建vue项目卸载vuenpm uninstall -g vu ...
h5在IOS使用videojs插件播放hls视频
h5使用videojs插件播放hls视频踩坑点具体实现步骤 1. index.html页面引入(最好下载到本地) 2. npm install video-js 并且在需要看监控的页面引入 3. ...
【uni-app】H5中使用videojs播放器播放视频
前言 uni-app 项目中,uni-app提供的video控件对H5的兼容性不好(该控件的主要使用目标是小程序). H5中使用videojs播放器替换video控件 videojs播放器在uni-a ...
EasyNVR网页摄像机直播方案H5前端构建之：如何播放HLS
背景描述 HLS (HTTP Live Streaming)是Apple的动态码率自适应技术,主要用于PC和Apple终端的音视频服务,包括一个m3u(8)的索引文件,TS媒体分片文件和key加密串文 ...
使用videojs播放m3u8视频
vue3使用videojs 播放m3u8格式视频 videojs是一个播放视频的js库,可以通过videojs结合videojs-contrib-hls实播放m3u8格式视频.流媒体传输协议(hls) ...
使用ffmpeg将视频转为hls格式并播放
转换并播放视频文件使用ffmpeg进行视频拆分 [为什要进行拆分] 如果直接将MP4文件放放到网站目录当中,必须下载整个视频才可以播放,解决办法是将视频分成一小片来传输,比如将MP4转码为M3U8格 ...
H5播放HLS之hls.min.js库
H5播放HLS之hls.min.js库视频推流 H播放HLS 视频推流为了产生HLS视频,我们可以借助srs来实现rtmp推流并生成HLS流,具体详细使用可以参考我之前的文章,这里不再赘述. 我们 ...
videojs+hls+rtmp网页播放
博主后面补充了一篇博文,具体可参考博客:rtsp+rtmp多路网页播放 - 蛋片鸡 - 博客园 ---------------------------------------------------- ...
H5播放器内置播放视频（兼容绝大多数安卓和ios）
关于H5播放器内置播放视频,这个问题一直困扰我很长一段时间,qq以前提供白名单已经关闭,后来提供了同层属性的控制,或多或少也有点差强人意. 后来一次偶然发现一个非常简单的方法可以实现. 只需要给vid ...

H5播放HLS之videojs播放视频

一、简介

二、实现

H5播放HLS之videojs播放视频相关推荐

最新文章

热门文章