Vue3视频播放（Video）

Vue2视频播放Video可自定义设置以下属性视频播放器宽度width类型string | number单位 px默认 800视频播放器高度height类型string | number单位 px默认 450视频文件地址src类型string默认 undefined支持网络地址 https 和相对地址视频封面地址poster类型string默认 undefined支持网络地址 https 和相对地址在未设置封面时自动获取视频第 second 秒指定帧作为封面图second类型number单位 s默认 0.5s由于不少视频第一帧为黑屏故设置视频开始播放时间为0.5s即取该时刻帧作为封面图视频封面和内容的缩放规则fit类型none | fill | contain | cover默认 contain // none:(默认)保存原有内容不进行缩放; fill:不保持原有比例内容拉伸填充整个内容容器; contain:保存原有比例内容以包含方式缩放; cover:保存原有比例内容以覆盖方式缩放视频就绪后是否马上播放autoplay优先级高于preload类型boolean默认 false是否向用户显示控件controls比如是否向用户显示控件比如进度条全屏等类型boolean默认 true视频播放完成后是否循环播放loop类型boolean默认 false是否静音muted类型boolean默认 false是否在页面加载后载入视频preload如果设置了autoplay属性则preload将被忽略类型auto | metadata | none默认metadata // auto:一旦页面加载则开始加载视频; metadata:当页面加载后仅加载视频的元数据 none:页面加载后不应加载视频播放暂停时是否显示播放器中间的暂停图标playIcon类型boolean默认 true暂停图标尺寸iconSize类型number单位 px默认 80注为避免与 HTML5 原生标签 video 冲突使用组件时必须使用大写组件名Video效果如下图在线预览①创建视频播放组件Video.vuescript setup langts import { ref, computed, watch } from vue export interface Props { width?: string | number // 视频播放器宽度单位 px height?: string | number // 视频播放器高度单位 px src?: string // 视频文件地址支持网络地址 https 和相对地址 poster?: string // 视频封面地址支持网络地址 https 和相对地址 second?: number // 在未设置封面时自动截取视频第 second 秒对应帧作为视频封面单位 s fit?: none | fill | contain | cover // 视频封面和内容的缩放规则参考 object-fit autoplay?: boolean // 视频就绪后是否马上播放优先级高于 preload controls?: boolean // 是否向用户显示控件比如进度条全屏等 loop?: boolean // 视频播放完成后是否循环播放 muted?: boolean // 是否静音 preload?: auto | metadata | none // 是否在页面加载后载入视频如果设置了 autoplay 属性则 preload 将被忽略 playIcon?: boolean // 播放暂停时是否显示播放器中间的暂停图标 iconSize?: number // 暂停图标尺寸单位 px } const props withDefaults(definePropsProps(), { width: 800, height: 450, src: undefined, poster: undefined, second: 0.5, /* fit 可选属性 none: 保存原有内容不进行缩放; fill: 不保持原有比例内容拉伸填充整个内容容器; contain: 保存原有比例内容以包含方式缩放; cover: 保存原有比例内容以覆盖方式缩放 */ fit: contain, /* 参考 MDN 自动播放指南https://developer.mozilla.org/zh-CN/docs/Web/Media/Autoplay_guide Autoplay 功能 据新政策媒体内容将在满足以下至少一个的条件下自动播放 1.音频被静音或其音量设置为 0 2.用户和网页已有交互行为包括点击、触摸、按下某个键等等 3.网站已被列入白名单如果浏览器确定用户经常与媒体互动这可能会自动发生也可能通过首选项或其他用户界面功能手动发生 4.自动播放策略应用到iframe或者其文档上 autoplay由于目前在最新版的Chrome浏览器以及所有以Chromium为内核的浏览器中 已不再允许自动播放音频和视频。就算你为video或audio标签设置了autoplay属性也一样不能自动播放 解决方法设置视频 autoplay 时视频必须设置为静音 muted: true 即可实现自动播放 然后用户可以使用控制栏开启声音类似某宝商品自动播放的宣传视频逻辑 */ autoplay: false, controls: true, loop: false, muted: false, /* preload可选属性 auto: 一旦页面加载则开始加载视频; metadata: 当页面加载后仅加载视频的元数据例如长度建议使用 metadata以便视频自动获取第一帧作为封面 poster none: 页面加载后不应加载视频 */ preload: metadata, playIcon: true, iconSize: 80 }) const veoRef ref() // 视频元素模板引用参考文档https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video const veoPoster ref() // 自动截取视频帧生成的封面 const playing refboolean(false) // 是否正在播放 const originPlay refboolean(true) // 是否第一次播放 const showPlayIcon refboolean(false) // 是否展示播放器中间的播放按钮图标 const emits defineEmits([play, pause]) const veoWidth computed(() { if (typeof props.width number) { return ${props.width}px } return props.width }) const veoHeight computed(() { if (typeof props.height number) { return ${props.height}px } return props.height }) watch( () props.second, () { getPoster() } ) watch( () props.autoplay, (to) { if (to) { showPlayIcon.value false originPlay.value false playing.value true } else { showPlayIcon.value true originPlay.value true playing.value false veoRef.value?.pause() } }, { immediate: true, flush: post } ) /* 自定义设置播放速度经测试 在vue2中需设置this.$refs.veoRef.playbackRate 2 在vue3中需设置veoRef.value.defaultPlaybackRate 2 */ // veoRef.value.defaultPlaybackRate 2 /* loadedmetadata 事件在元数据metadata被加载完成后触发 loadeddata 事件在媒体当前播放位置的视频帧通常是第一帧加载完成后触发 若在移动/平板设备的浏览器设置中开启了流量节省data-saver模式该事件则不会被触发。 preload 为 none 时不会触发 */ function getPoster() { // 在未设置封面时自动截取视频0.5s对应帧作为视频封面 // 由于不少视频第一帧为黑屏故设置视频开始播放时间为0.5s即取该时刻帧作为封面图 if (veoRef.value) { veoRef.value.currentTime props.second // 创建canvas元素 const canvas document.createElement(canvas) const ctx canvas.getContext(2d) // canvas画图 canvas.width veoRef.value.videoWidth canvas.height veoRef.value.videoHeight ctx?.drawImage(veoRef.value, 0, 0, canvas.width, canvas.height) // 把canvas转成base64编码格式 veoPoster.value canvas.toDataURL(image/png) } } function onClickPlay() { if (originPlay.value) { originPlay.value false veoRef.value.currentTime 0 } if (playing.value) { veoRef.value.pause() } else { veoRef.value.play() } } function onPause() { playing.value false if (props.playIcon) { showPlayIcon.value true } emits(pause) } function onPlay() { playing.value true if (props.playIcon) { showPlayIcon.value false } emits(play) } function play() { if (originPlay.value) { originPlay.value false veoRef.value.currentTime 0 } if (!playing.value) { veoRef.value.play() } } function pause() { if (playing.value) { veoRef.value.pause() } } defineExpose({ play, pause }) /script template div classvideo-wrap :class{ video-hover: showPlayIcon } :style--video-width: ${veoWidth}; --video-height: ${veoHeight}; --video-icon-scale: ${iconSize / 80}; video refveoRef classvideo-element :styleobject-fit: ${fit}; :srcsrc :posterposter ? poster : veoPoster :autoplayautoplay :controls!originPlay controls :looploop :mutedautoplay || muted :preloadpreload crossoriginanonymous loadedmetadataposter ? () false : getPoster() pauseonPause() playonPlay() click.preventonClickPlay v-bind$attrs 您的浏览器不支持video标签。 /video span v-showoriginPlay || playIcon classicon-play :class{ icon-show: showPlayIcon } svg classplay-svg xmlnshttp://www.w3.org/2000/svg viewBox0 0 34 34 path dM28.26,11.961L11.035,0.813C7.464-1.498,3,1.391,3,6.013v21.974c0,4.622,4.464,7.511,8.035,5.2L28.26,22.039 C31.913,19.675,31.913,14.325,28.26,11.961z /path /svg /span /div /template style langless scoped .video-wrap { width: var(--video-width); height: var(--video-height); position: relative; background: #000; cursor: pointer; .video-element { display: inline-block; width: 100%; height: 100%; vertical-align: bottom; } .icon-play { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 80px; height: 80px; transform: scale(var(--video-icon-scale)); border-radius: 50%; background-color: rgba(0, 0, 0, 0.6); opacity: 0; pointer-events: none; transition: background-color 0.3s; .play-svg { display: inline-block; color: #fff; fill: currentColor; width: 29px; height: 34px; margin-left: 3px; } } .icon-show { opacity: 1; } } .video-hover { :hover { .icon-play { background-color: rgba(0, 0, 0, 0.7); } } } /style②在要使用的页面引入script setup langts import Video from ./Video.vue import { ref } from vue const src ref(https://cdn.jsdelivr.net/gh/themusecatcher/resources0.1.2/ultra.mp4) const poster ref(https://cdn.jsdelivr.net/gh/themusecatcher/resources0.1.2/ultra.jpg) const video ref() function onPlay() { console.log(play) } function onPause() { console.log(pause) } const play () { video.value.play() } const pause () { video.value.pause() } /script template div stylemax-width: 800px h1{{ $route.name }} {{ $route.meta.title }}/h1 h2 classmt30 mb10基本使用/h2 Video :srcsrc :posterposter playonPlay pauseonPause / h2 classmt30 mb10自定义视频和图标尺寸/h2 Video :srcsrc :posterposter :width400 :height225 :icon-size60 / h2 classmt30 mb10自动截取视频指定帧作为视频封面/h2 h3 classmb10在未设置封面时自动截取视频第 second 秒指定帧作为封面图/h3 Video :srcsrc :second3 / h2 classmt30 mb10自定义视频封面和内容的缩放规则/h2 Video :srcsrc :posterposter fitcover / h2 classmt30 mb10自动循环播放/h2 h3 classmb10 autoplay由于目前在最新版的 Chrome 浏览器以及所有以 Chromium 为内核的浏览器中已不再允许自动播放音频和视频。就算你为 video 或 audio 标签设置了 autoplay 属性也一样不能自动播放 /h3 h3 classmb10 解决方法设置视频 autoplay 时视频必须设置为静音 muted: true 即可实现自动播放然后用户可以使用控制栏开启声音类似某宝商品自动播放的宣传视频逻辑 /h3 Video :srcsrc :posterposter autoplay loop / h2 classmt30 mb10隐藏播放控件/h2 Video :srcsrc :posterposter :controlsfalse / h2 classmt30 mb10隐藏暂停图标/h2 Video :srcsrc :posterposter :play-iconfalse / h2 classmt30 mb10使用 Methods/h2 Flex vertical Space Button typeprimary clickplay播放/Button Button clickpause暂停/Button /Space Video refvideo :srcsrc :posterposter playonPlay pauseonPause / /Flex /div /template