vue3 video-player MediaError code 4

### Vue3中使用`vue-video-player`遇到MediaError Code 4的解决方案

当在Vue3项目里集成`vue-video-player`并遭遇`MediaError code 4`错误时，这通常意味着媒体资源无法加载或不被浏览器支持。此问题可能源于多个方面，包括但不限于使用的协议、插件兼容性和版本控制。

对于RTMP协议的支持不佳是一个常见原因[^1]。建议避免采用RTMP作为直播源协议，转而考虑更广泛受支持的标准如HLS（HTTP Live Streaming）。为了使`vue-video-player`能够处理HLS流，需额外引入`videojs-contrib-hls`插件。

关于组件及其依赖项的具体版本也至关重要。过高版本可能导致与现有环境或其他库之间的冲突，进而引发诸如`MediaError code 4`这样的异常情况。基于过往经验，推荐安装特定稳定版以减少此类风险，例如通过命令`npm install vue-video-player@5.0.2 --save`指定较低版本号来规避潜在的问题[^2]。

下面给出一段适用于Vue3项目的配置示例：

import { createApp } from 'vue';
// 导入必要的样式文件
import 'video.js/dist/video-js.css';
import 'vue-video-player/src/custom-theme.css';

const app = createApp(App);

app.use(VueVideoPlayer, {
    options: {
        // 设置默认选项...
        autoplay: false,
        controls: true,
        fluid: true,
        sources: [{
            src: 'your_hls_stream_url_here', 
            type: 'application/x-mpegURL' // 确保类型匹配所选流格式
        }]
    }
});

此外，在模板部分定义播放器实例时可参照如下结构：

<template>
<div id="app">
    <!-- 使用自定义事件监听器 -->
    <video-player class="vjs-custom-skin"
                  ref="videoPlayer"
                  :options="playerOptions"
                  @play="onPlayerPlay($event)"
                  @pause="onPlayerPause($event)">
    </video-player>
</div>
</template>

<script setup>
import { ref } from 'vue';
let playerOptions = ref({
    // 初始化参数设置...
});

function onPlayerPlay(event){
    console.log('Playing:', event);
}

function onPlayerPause(event){
    console.log('Paused:', event);
}
</script>