1.main.ts
安装
npm i vue3-video-play --saveimport VueVideoPlayer from '@videojs-player/vue'
import 'video.js/dist/video-js.css'app.use(VueVideoPlayer)2.复制代码直接使用
<script setup lang="ts">
import {ref} from "vue";
import {convertToSeconds} from "@/config/Tool";let playerOptions = ref({// height: 200,// width: document.documentElement.clientWidth, //播放器宽度playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度autoplay: false, // 如果true,浏览器准备好时开始回放。muted: true, // 默认情况下将会消除任何音频。loop: false, // 导致视频一结束就重新开始。preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）language: 'zh-CN',aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。controls: true,controlBar: {timeDivider: true,durationDisplay: true,playToggle: true,currentTimeDisplay: true,// 剩余时间remainingTimeDisplay: true,// 进度条progressControl: false,fullscreenToggle: true // 全屏按钮}
})
let currentTime = ref(10)
const myVideo = ref(null);/*** 播放时长改变触发* @param e*/
function timeupdateFun(e:any) {};
/*** 视频暂停触发*/
function pauseFun(e:any){var paragraphs = e.target.getElementsByClassName("vjs-current-time-display");let seconds= convertToSeconds(paragraphs[0].textContent)console.log(seconds)
}/*** 开始播放触发*/
function playFun(e:any){//console.log('开始播放触发'+e)}/*** 结束播放触发* @param e*/
function endedFun(e:any){// console.log(e)var paragraphs = e.target.getElementsByClassName("vjs-current-time-display");let seconds= convertToSeconds(paragraphs[0].textContent)console.log(seconds)
}function loadedmetadataFun(e:any){console.log(e)
}</script><template><div><video-player@pause="pauseFun"@play="playFun"@ended="endedFun"id="myVideo":ref="myVideo"@timeupdate="timeupdateFun"@loadedmetadata="loadedmetadataFun":src="'https://video-js.51miz.com/preview/video/00/00/18/22/V-182219-2916E838.mp4'":options="playerOptions":volume="0.6":currentTime="currentTime"/></div>
</template><style scoped></style>
3.获取当前播放了多少秒转换方法
/*** 视频时间格式转秒数* @param time*/
export function convertToSeconds(time:any) {const parts = time.split(':');let seconds = 0;if (parts.length === 3) {seconds += parseInt(parts[0]) * 3600;seconds += parseInt(parts[1]) * 60;} else if (parts.length === 2) {seconds += parseInt(parts[0]) * 60;}seconds += parseInt(parts[parts.length - 1]);return seconds;
}完整代码，粘贴复制即可获取到当前播放进度
