效果图:
1、场景:
js原生的video标签在不同浏览器及不同型号手机上都展示的不一样,一部分没有倍速,一部分没有全屏等功能,为了统一视频播放的交互功能,使用vue-video-player插件来完成,vue-video-player插件支持在Vue2/Vue3/Reacet项目中使用,以下是在vue3中使用示例
2、下载插件:
npm i vue-video-player@6.0.0
这里我下载的是最新版6.0.0
3、注册组件
- 方式一,在main.js导入并注册后全局使用:
import { createApp } from 'vue'
import VideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
const app = createApp(App)
app.use(VideoPlayer)
- 方式二,在具体的vue文件中引入使用:
import { VideoPlayer } from "@videojs-player/vue";
import "video.js/dist/video-js.css";
4、使用组件:
<video-player
ref="videoPlayer"
@play="handleFullScreen"
:options="playerOptions"
/>
import { VideoPlayer } from "@videojs-player/vue";
import "video.js/dist/video-js.css";
import poster from "@/assets/images/videoStar.png"; // 封面图
const { proxy } = getCurrentInstance();
const playerOptions = ref({
language: "zh-CN", // 语言
playbackRates: [0.5, 1.0, 1.5, 2.0], // 倍速可选项 可自定义
playsinline: true,
controls: true, // 是否展示控制栏
poster, // 封面图
sources: [
{
// type为视频资源类型 application/x-mpegURL在总结着重介绍
type: "video/mp4",
src: '如果是指定的http链接,请确保后端返会的是MP4格式的数据'
},
],
});
const handleFullScreen = () => {
if (!proxy.$refs.videoPlayer?.$el?.player) return;
// 点击播放时设置默认全屏 proxy可以理解为vue2的this
proxy.$refs.videoPlayer.$el.player.requestFullscreen();
};
总结:
vue-video-player插件的使用方式很简单,一般情况下是可以在播放视频的过程中拖动进度条的,但开发过程中也遇到一些问题:
- options中的soure.type可选值:
application/dash+xml
:DASH(Dynamic Adaptive Streaming over HTTP)流媒体application/x-mpegURL
(或application/vnd.apple.mpegurl
):HLS流媒体video/webm
:WebM视频文件audio/mpeg
:MP3音频文件video/mp4
:MP4视频文件- 注意:type类型一定要和src值返回的数保持一致!!
- 鼠标点击进度条后视频直接重置到了起点,这个问题可以参考:
解决浏览器使用 vue-video-player播放视频不能拖动或点击进度条到指定位置播放,拖动或点击进度条会立即反弹回起点播放-CSDN博客