通过EasyPlayer在浏览器中实现H.264视频流播放_easyplayer的live属性

Vue项目实战：通过EasyPlayer在浏览器中实现H.264视频流播放

目的

在浏览器中展示并播放第三方的 HLS 视频流，以下步骤详细介绍了如何使用 EasyPlayer 来实现此功能，并提供了优化和规范化集成的指南。

1.安装必要的包

为了集成 EasyPlayer 到您的项目中，首先需要安装两个包：

 npm install @easydarwin/easyplayer --save
 npm install copy-webpack-plugin@5.1.2 --save-dev
1
2

• @easydarwin/easyplayer: 这个包包含 EasyPlayer 组件，用于在 Vue 应用中播放视频。
• copy-webpack-plugin: 用于将特定文件复制到设定的路径，以确保 EasyPlayer 的依赖可以在构建后的项目中正确访问。

下面是官方文档的解释

• Vue 集成调用(添加在vue.config.js文件 对应第二步)

copy node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.swf 到 静态文件 根目录

copy node_modules/@easydarwin/easyplayer/dist/component/crossdomain.xml 到 静态文件 根目录

copy node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer-lib.min.js 到 静态文件 根目录

注意： 没有调用会出现无法加载对应插件的报错

在 html 中引用 dist/component/EasyPlayer-lib.min.js（引入js文件 对应第三步）

###H.265 copy node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.wasm 到 静态文件 根目录

2.Vue 配置 (vue.config.js)

接下来，在项目的 vue.config.js 文件中进行如下配置，以确保 EasyPlayer 组件的依赖被正确复制到静态资源目录中：

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

module.exports = {
  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin([
        {
          from: 'node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.swf',
          to: './libs/EasyPlayer/'
        },
        {
          from: 'node_modules/@easydarwin/easyplayer/dist/component/crossdomain.xml',
          to: './libs/EasyPlayer/'
        },
        {
          from: 'node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer-lib.min.js',
          to: './libs/EasyPlayer/'
        }
      ])
    ]
  }
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

3.引入 EasyPlayer 依赖

确保在项目的启动文件或 HTML 模板中引入 EasyPlayer-lib.min.js：

<!-- 在 public/index.html 中插入下面的 script 标签 -->
<script src="./libs/EasyPlayer/EasyPlayer-lib.min.js"></script>

1
2
3

4.使用 EasyPlayer 组件

在 Vue 组件中引用 EasyPlayer，并设置必要的属性来显示视频流：

<template>
  <el-row>
    <el-col :span="24">
    <easy-player
      :video-url="videoUrl"
      :live="true"
      :stretch="false"
      :video-title="'右上角的标题，要加单引号'"
      style="width: 100%; height: 85vh"
       ></easy-player>
    </el-col>
  </el-row>
</template>
<script>
import EasyPlayer from '@easydarwin/easyplayer'

export default {
  components: {  EasyPlayer },
  data() {
    return {
      videoUrl: 'http://********.m3u8',
    };
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

5.效果展示

6.官方支持的属性

EasyPlayer 支持多种属性来自定义播放器的功能和外观，这些属性通常在组件标签中设置，如示例所示。

通过以上步骤，您可以优化并规范地在浏览器中展示和播放第三方 HLS 视频流。

一般在标签里引用如

​ <easy-player
​ :video-url=“videoUrl”
​ :live=“true”
​ :stretch=“false”
​ :video-title=“‘右上角的标题，要加单引号’”
​ style=“width: 100%; height: 85vh”
​ >

配置属性

HTTP-FLV 播放相关属性

注意：此属性只在播放flv格式的流时生效。

事件回调