【视频直播篇二】vue-cli3集成LivePlayer

前言

这个视频直播出了一个系列，以下文章是几个播放器的使用教程

• 【视频直播篇一】入门篇
• 【视频直播篇三】vue-cli3集成vue-video-player
• 【视频直播篇四】vue-cli3集成flv.js
• 【视频直播篇五】vue-cli3集成vue-aliplayer-v2
• 【视频直播篇六】videojs的使用
• 【视频直播篇七】Aliplayer的使用

正文

关于LivePlayer的介绍请参考https://www.liveqing.com/docs/products/LiveQing.html
官方文档请移步这里https://www.liveqing.com/docs/manuals/LivePlayer.html

首先导入插件

npm install @liveqing/liveplayer --save-dev

然后把下面三个文件放入public目录

• crossdomain.xml
• liveplayer.swf
• liveplayer-lib.min.js

并在vue.config.js文件中添加这样一段配置

const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  //其它配置省略 ...
  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin([
        { from: 'node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml'},
        { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf'},
        { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js', to: 'js/'}
     ])
    ]
  }
}

如果提示要安装copy-webpack-plugin插件的话，执行下面命令

npm install --save-dev copy-webpack-plugin

之后在public目录找到index.html文件的head节点，加入以下内容

<script src="/js/liveplayer-lib.min.js"></script>

注意这里，有文章这样写

<script src="js/liveplayer-lib.min.js"></script>

实测无效，需要在js前面加/

最后就可以写页面了

<template>
    <div class="hello">

        <div style="width:512px;height:300px;margin:auto">
            <LivePlayer videoUrl="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" />
        </div>
        <div style="width:512px;height:300px;margin:auto">
            <!--大部分主流浏览器都不支持这种格式了，这里只做示例-->
            <LivePlayer videoUrl="rtmp://58.200.131.2:1935/livetv/cctv1" />
        </div>
        <div style="width:512px;height:300px;margin:auto" class="palyer2">
            <LivePlayer  @snapOutside="snapOutside" ref="player2" videoUrl="http://samples.mplayerhq.hu/FLV/zeldaHQ.flv" live />
        </div>

        <h1>{
  { msg }}</h1>
        <h3>相关说明</h3>
        <ul>
            <li><a href="https://www.liveqing.com/docs/manuals/LivePlayer.html#%E5%B1%9E%E6%80%A7-property" target="_blank" rel="noopener">属性(Property)</a></li>
            <li><a href="https://www.liveqing.com/docs/manuals/LivePlayer.html#%E6%96%B9%E6%B3%95-medthod" target="_blank" rel="noopener">方法(Medthod)</a></li>
            <li><a href="https://www.liveqing.com/docs/manuals/LivePlayer.html#%E4%BA%8B%E4%BB%B6-event" target="_blank" rel="noopener">事件(Event)</a></li>
        </ul>

        <h3>方法调用示例</h3>
        <ul>
            <li><a @click="pause" rel="noopener">暂停</a></li>
            <li><a @click="play" rel="noopener">播放</a></li>
            <li><a @click="snap" rel="noopener">截图数据</a></li>
        </ul>
        <br/>
        <br/>
    </div>
</template>

<script>
    import LivePlayer from '@liveqing/liveplayer'
    export default {
        name: 'LivePlayerDemo',
        components: {
            LivePlayer
        },
        props: {
            msg: String
        },
        methods: {
            pause: function () {
                this.$refs.player2.pause();
            },
            play: function () {
                this.$refs.player2.play();
            },
            snap: function () {
                this.$refs.player2.snap();
            },
            snapOutside: function (snapData) {
                alert(snapData)
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
    h3 {
        margin: 40px 0 0;
    }
    ul {
        list-style-type: none;
        padding: 0;
    }
    li {
        display: inline-block;
        margin: 0 10px;
        cursor: pointer;
    }
    a {
        color: #42b983;
    }
</style>

这样就完成集成了LivePlayer了，大家可以试一下