VUE中集成H5直播点播播放器LivePlayer过程

基于VUE和webpck的前端工程这里可以参考 https://github.com/livegbs/GB28181-Server1、安装@liveqing/liveplayernpm -i @liveqing/liveplayer --save-dev2、webpack.config.js 添加配置这里是配置webpack自动copy，当然也可以手动复制到待发布的web目录，如ww...

Marvin1311

3856人浏览 · 2019-11-29 17:42:02

Marvin1311 · 2019-11-29 17:42:02 发布

基于VUE和webpck的前端工程

这里可以参考 https://github.com/livegbs/GB28181-Server

1、安装@liveqing/liveplayer

npm -i @liveqing/liveplayer --save-dev

2、webpack.config.js 添加配置

这里是配置webpack自动copy，当然也可以手动复制到待发布的web目录，如www

....
const CopyWebpackPlugin = require('copy-webpack-plugin');
....
   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/'}
    ]),
   ...
   ]

3、配置template.html

<!DOCTYPE HTML>
<html>
    <head>
     .....
        <!--这里的路径是上一步copy，相对于www目录的相对路径，最终目的让浏览器可以访问到这个js-->
        <script src="js/liveplayer-lib.min.js"></script>
    </head>
    <bodyr>
        .....
    </body>
</html>

4、.vue中使用liveplayer

4.1、 import 引入

import LivePlayer from "@liveqing/liveplayer";

4.2、 components 中添加

 components: {
    LivePlayer
 }

4.3 页面中添加组件

	<div>
	....
   <LivePlayer :videoUrl="url" live muted stretch></LivePlayer>
   ....
   </div>

4.4 url设置

this.url = 播放的视频地址

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^