LivePlayer H5播放器

特点

支持WebRTC播放;
支持MP4播放;
支持m3u8/HLS播放;
支持HTTP-FLV/WS-FLV播放;
支持RTMP播放;
支持直播和点播播放;
支持播放器快照截图;
支持点播多清晰度播放;
支持全屏或比例显示;
自带的flash支持极速和流畅模式;
自带的flash支持HTTP-FLV播放;
自动检测IE浏览器兼容播放;
支持自定义叠加层;v1.7.9

属性和方法

在vue中使用

第一步

安装下载

npm install @liveqing/liveplayer

引入依赖

安装 copy-webpack-plugin 插件, `npm install copy-webpack-plugin@4.6.0`

两种引入方法

第一种：在webpack.config.js

const webpack = require('webpack')
const copyPlugin = require('copy-webpack-plugin')
const htmlPoint = []
htmlPoint.push(new webpack.HotModuleReplacementPlugin())
htmlPoint.push(
  new copyPlugin([
    {
      from: 'node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml',
      to: 'static/js/'
    },
    {
      from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf',
      to: 'static/js/'
    },
    {
      from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js',
      to: 'static/js/'
    }
  ])
)

注意：在这种方法使用时，要新建一个js文件夹，使to指向该文件夹(to路径不对，容易报错)

1636963125(1).png

第二种：在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/'},
        ])
      ]
    }
  }

第二步

html模板中引入依赖js（在public文件夹下的index.html文件）

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <script src="../src/static/js/liveplayer-lib.min.js"></script>
    <!-- built files will be auto injected -->
  </body>
</html>

第三步

在页面中使用

<template>
  <div class="index">
    <LivePlayer :videoUrl="videoUrl" fluent autoplay live stretch></LivePlayer>
  </div>
</template>

<script>
import LivePlayer from '@liveqing/liveplayer'
export default {
  name: 'index',
  data () {
    return {
      videoUrl: 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8'
    }
  },
  comments: {
    LivePlayer
  }
}
</script>

<style scoped lang="less">
@import "./index.less";
</style>

使用vue+liveplayer视频播放

LivePlayer H5播放器

特点

属性和方法

在vue中使用

第一步

安装下载

引入依赖

第二步

第三步