通过EasyPlayer在浏览器中实现H.264视频流播放

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

目的

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

1.安装必要的包

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

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

• @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/'
        }
      ])
    ]
  }
};

3.引入 EasyPlayer 依赖

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

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

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>

5.效果展示

6.官方支持的属性

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

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

一般在标签里引用如

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

配置属性

参数	说明	类型	默认值
video-url	视频地址	String	-
video-title	视频右上角显示的标题	String	-
poster	视频封面图片	String	-
auto-play	自动播放	Boolean	true
live	是否直播, 标识要不要显示进度条	Boolean	true
speed	是否显示倍速播放按钮。注意：当live为true时，此属性不生效	Boolean	true
loop	是否轮播。	Boolean	false
alt	视频流地址没有指定情况下, 视频所在区域显示的文字	String	无信号
muted	是否静音	Boolean	false
aspect	视频显示区域的宽高比	String	16:9
isaspect	视频显示区域是否强制宽高比	Boolean	true
loading	指示加载状态, 支持 sync 修饰符	String	-
fluent	流畅模式	Boolean	true
timeout	加载超时(秒)	Number	20
stretch	是否不同分辨率强制铺满窗口	Boolean	false
show-custom-button	是否在工具栏显示自定义按钮(极速/流畅, 拉伸/标准)	Boolean	true
isresolution	是否在播放 m3u8 时显示多清晰度选择	Boolean	false
isresolution	供选择的清晰度 “yh,fhd,hd,sd”, yh:原始分辨率	fhd:超清，hd:高清，sd:标清	-
resolutiondefault	默认播放的清晰度	String	hd
isTransCoding	是否开启转raw	Boolean	false

HTTP-FLV 播放相关属性

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

属性	说明	类型	默认值
hasaudio	是否有音频，传递该属性可以加快启播速度	Boolean	默认不配置自动判断
hasvideo	是否有视频，传递该属性可以加快启播速度	Boolean	默认不配置自动判断

事件回调

方法名	说明	参数
video-url	触发通知消息	type: ‘’, message: ‘’
ended	播放结束	-
timeupdate	进度更新	当前时间进度
pause	暂停	当前时间进度
play	播放	当前时间进度