Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
eec2f550 1 parent 682edfda

feat(video-player): 添加多码率切换功能支持 

新增 videojs-contrib-quality-levels 和 videojs-hls-quality-selector 插件
支持自动识别 m3u8 多码率并在控制条显示清晰度切换菜单
Inline Side-by-side
Showing 1 changed file with 4 additions and 0 deletions
...@@ -2,6 +2,10 @@ import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'; ...@@ -2,6 +2,10 @@ import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue';
2 import { wxInfo } from "@/utils/tools"; 2 import { wxInfo } from "@/utils/tools";
3 import Hls from 'hls.js'; 3 import Hls from 'hls.js';
4 import videojs from "video.js"; 4 import videojs from "video.js";
5 +// 新增：引入多码率切换插件
6 +import 'videojs-contrib-quality-levels'; // 用于读取 m3u8 中的多码率信息
7 +import 'videojs-hls-quality-selector'; // 用于在播放器控制条显示“清晰度”切换菜单（支持 Auto/720p/480p 等）。
8 +import 'videojs-hls-quality-selector/dist/videojs-hls-quality-selector.css';
5 9
6 /** 10 /**
7 * - 使用方法 ：您无需修改业务代码。只要传入的视频 URL 是七牛云生成的多码率 .m3u8 地址，播放器控制条右下角会自动出现“齿轮”图标，用户点击即可切换清晰度（或选择 Auto 自动切换）。 11 * - 使用方法 ：您无需修改业务代码。只要传入的视频 URL 是七牛云生成的多码率 .m3u8 地址，播放器控制条右下角会自动出现“齿轮”图标，用户点击即可切换清晰度（或选择 Auto 自动切换）。
......