一、简介
如果要让网页反对在所有浏览器上播放，就须要应用第三方的播放器。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> <video id="my-video" class="video-js vjs-big-play-centered" controls preload="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 autofocus placeholder="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