更新2.0：vue3-vite 使用 xgplayer 和 Easy-player.js 播放H265视频流

最近公司项目里，需要播放H265视频流，找了很多插件方式和找了很多参考，但还是折腾了许久，最终，使用这个插件来实现，并写出心得记录一下，给大家做个实际的参考，以及也给以后的自己参考

---

强烈推荐：xgplayer西瓜视频播放器

tips: 根据大佬建议，可以运用更简便的方式播放H265编码格式：xgplayer 西瓜视频播放器

1：安装 xgplayer 插件 , 如：播放视频流格式为MP4的

根据视频流，选择安装不同的插件：使用xgplayer-mp4、xgplayer-hls、xgplayer-flv等插件

npm i xgplayer
npm i xgplayer-mp4

2：组件使用

<div class="video">
    <div id="videoId"></div>
</div>

import Player from 'xgplayer'
import mp4Plugin from 'xgplayer-mp4'
import 'xgplayer/dist/index.min.css'

this.player = new Player({
    id: 'videoId', 
    isLive: true,
    autoplay: true,
    muted: true,
    plugins: [mp4Plugin],
    url: '', // 视频流播放地址
    height: '100%',
    width: '100%'
    })
    
    this.player
    .play()
    .then(() => {
        // 播放成功
        console.log('播放成功')
    })
    .catch(() => {
        // 播放失败，一般发生于未经用户交互时的自动播放
        console.log('播放失败，一般发生于未经用户交互时的自动播放')
    })

---

注意：如果以上方式配置正确后依旧播放不了，就用以下方式，【以下方式专治各种不服】

Easy-player.js 方式：

一：根文件 index.html 位置不需要挪动，只是后续需要引入一个文件，往下看

二：默认安装最新版：easyplayer.js 和video.js ，因为插件依赖video.js

npm i @easydarwin/easyplayer -S
npm i video.js -S

三：找到对应插件的几个文件，并复制出来放入 public 文件夹中

• EasyPlayer.wasm: 文件是用于解析 视频流的

四：在index.html 中，引入Easyplayer-element.min.js 【只需要引入这一个就好】

<script type="text/javascript" src="EasyPlayer-element.min.js"></script>

五：直接使用组件，不需要额外引入

    <!-- 直接使用插件 -->
    <easy-player
        id="EasyPlayer"
        ref="vVideoPlayerRef"
        live
        muted
        autoplay
        has-audio="false"
        :video-url="videoUrl"
    ></easy-player>

    // 视频流 url 地址
    let videoUrl = ref('')

以上就是简单并有效的使用流程，还有不懂的和其他问题的，留言吧 =_=