流媒体播放常用前端方案。
flv.js
https://github.com/Bilibili/flv.js/
Installation
npm install --save flv.js
Build
npm install # install dev-dependences
npm install -g gulp # install build tool
gulp release # packaged & minimized js will be emitted in dist folder
cnpm mirror is recommended if you are in Mainland China.
CORS ~ 跨域问题。
If you use standalone video server for FLV stream, Access-Control-Allow-Origin header must be configured correctly on video server for cross-origin resource fetching.
See cors.md for more details.
- Getting Started ~ HelloWorld
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="flv.min.js"></script>
<video id="videoElement"></video>
<script>
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
var flvPlayer = flvjs.createPlayer({
type: 'flv',
// url: 'http://example.com/flv/video.flv'
url: 'http://192.168.33.128:8080/live/livestream.flv'
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
</script>
</body>
</html>
ckplayer。
https://www.ckplayer.com/
https://gitee.com/niandeng/ckplayer
ckplayer 不存在安装过程,将下载包里的 ckplayer 文件夹(该文件夹包含ckplayer.js, ckplayer.swf, ckplayer.json 等文件)上传到网站环境中即可使用,在需要播放视频的页面上插入下面代码即可,注意引入 ckplayer.js 文件的路径。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8" data-name="ckplayer"></script>
<div class="video" style="width: 600px;height: 400px;">播放器容器</div>
<script type="text/javascript">
//定义一个变量:videoObject,用来做为视频初始化配置
var videoObject = {
container: '.video',// “#”代表容器的 ID,“.” 或 “” 代表容器的 class。
variable: 'player',// 播放函数名称,该属性必需设置,值等于下面的 new ckplayer() 的对象。
// video: 'http://ckplayer-video.oss-cn-shanghai.aliyuncs.com/sample-mp4/05cacb4e02f9d9e.mp4'// 视频地址。
video: 'http://192.168.33.128:8080/live/livestream.m3u8'// 视频地址。
};
var player = new ckplayer(videoObject);//初始化播放器
</script>
</body>
</html>
liveqing。
https://www.liveqing.com/docs/download/LivePlayer.html
<!DOCTYPE HTML>
<html>
<head>
<title>liveplayer</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
<!-- 引用 liveplayer-element.min.js -->
<script type="text/javascript" src="dist/element/liveplayer-element.min.js"></script>
</head>
<body>
<!--<live-player id="player01" video-url="rtmp://live.hkstv.hk.lxdns.com/live/hks" live="true" stretch="true">
<div style="position:absolute;left:15px;top:15px;color:#FFF;">自定义叠加层</div>
</live-player>
<live-player video-url="http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8" live="false" stretch="true"></live-player>
<live-player video-url="http://live.hkstv.hk.lxdns.com/flv/hks.flv" live="true" stretch="true"></live-player>-->
<live-player id="player01" video-url="rtmp://192.168.33.128/live/livestream" live="true" stretch="true">
<div style="position:absolute;left:15px;top:15px;color:#FFF;">自定义叠加层</div>
</live-player>
<live-player video-url="http://192.168.33.128:8080/live/livestream.m3u8" live="false" stretch="true"></live-player>
<live-player video-url="http://192.168.33.128:8080/live/livestream.flv" live="true" stretch="true"></live-player>
<script>
window.onload = function () {
// 页面加载完成以后执行
// JavaScript 交互示例, 需要将页面代码放到 http web server 容器下, 通过浏览器 http 协议访问
var player = document.getElementById('player01');
player.addEventListener('snapOutside', evt => {
console.log('获取快照 base64 数据', evt.detail[0]);
});
player.addEventListener('fullscreenchange', function() {
console.log('fullscreenchange', player.getVueInstance().isFullscreen());
});
setTimeout(() => {
console.log("快照, 回调 snapOutside...");
player.getVueInstance().snap();
console.log("静音...");
player.getVueInstance().setMuted(true);
console.log("静音状态: " + player.getVueInstance().getMuted());
console.log("暂停...");
player.getVueInstance().pause();
console.log("暂停状态: " + player.getVueInstance().paused());
console.log("全屏状态: " + player.getVueInstance().isFullscreen());
//触发全屏, 需要放置到交互事件回调中
//btn.onclick = () => { player.getVueInstance().requestFullscreen(); }
player.getVueInstance().setMuted(false);
console.log("音量: " + player.getVueInstance().getVolume());
player.getVueInstance().setVolume(0.5);
console.log("音量1: " + player.getVueInstance().getVolume());
player.getVueInstance().setVolume(0.3);
console.log("音量2: " + player.getVueInstance().getVolume());
}, 3000);
setTimeout(() => {
console.log("放音...");
player.getVueInstance().setMuted(false);
console.log("静音状态: " + player.getVueInstance().getMuted());
console.log("播放...");
player.getVueInstance().play();
console.log("暂停状态: " + player.getVueInstance().paused());
}, 6000);
setTimeout(() => {
console.log("切换媒体源...");
player.setAttribute("video-url", "rtmp://live.hkstv.hk.lxdns.com/live/hks2");
}, 9000);
}
</script>
</body>
</html>