流媒体播放常用前端方案。

lyfGeek

已于 2023-02-13 00:05:10 修改

阅读量2.2k

点赞数 3

分类专栏：解决方案。前端。文章标签：直播流媒体 flv.js

于 2020-11-28 14:28:05 首次发布

本文链接：https://blog.csdn.net/lyfGeek/article/details/110268843

版权

解决方案。同时被 2 个专栏收录

17 篇文章 1 订阅

订阅专栏

前端。

9 篇文章 0 订阅

订阅专栏

流媒体播放常用前端方案。

文章目录

- 流媒体播放常用前端方案。

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>