共计 3366 个字符,预计需要花费 9 分钟才能阅读完成。
一、简介
如果要让网页反对在所有浏览器上播放,就须要应用第三方的播放器。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
正文完