图书网站建设,评价高的企业网站开发,网页设计色彩搭配,做网站怎么每天更新内容效果图#xff1a; 1、场景#xff1a;
js原生的video标签在不同浏览器及不同型号手机上都展示的不一样#xff0c;一部分没有倍速#xff0c;一部分没有全屏等功能#xff0c;为了统一视频播放的交互功能#xff0c;使用vue-video-player插件来完成#xff0c;vue-vid…效果图 1、场景
js原生的video标签在不同浏览器及不同型号手机上都展示的不一样一部分没有倍速一部分没有全屏等功能为了统一视频播放的交互功能使用vue-video-player插件来完成vue-video-player插件支持在Vue2/Vue3/Reacet项目中使用以下是在vue3中使用示例
2、下载插件 npm i vue-video-player6.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-playerrefvideoPlayerplayhandleFullScreen:optionsplayerOptions/
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的thisproxy.$refs.videoPlayer.$el.player.requestFullscreen();
};
总结
vue-video-player插件的使用方式很简单一般情况下是可以在播放视频的过程中拖动进度条的但开发过程中也遇到一些问题
options中的soure.type可选值 application/dashxmlDASHDynamic Adaptive Streaming over HTTP流媒体application/x-mpegURL或application/vnd.apple.mpegurlHLS流媒体video/webmWebM视频文件audio/mpegMP3音频文件video/mp4MP4视频文件注意type类型一定要和src值返回的数保持一致鼠标点击进度条后视频直接重置到了起点这个问题可以参考 解决浏览器使用 vue-video-player播放视频不能拖动或点击进度条到指定位置播放,拖动或点击进度条会立即反弹回起点播放-CSDN博客
