上面通过videojs创建了一个Player对像,我们就可以通过这个对象的各种函数来操作播放器。 同样这里只说说常用的函数,其他的大家参考官网https://docs.videojs.com/player src(string | SourceObject | SourceObject[]):设置视频源 src():string:获取当前视频源 play():播放 pause():暂停 paused():boolean:是否暂停 ...
时长更新函数,通过ev.target.currentTime获取当前时间,最好parseInt取整一下 constonTimeupdate=(ev:any)=>{videoCurDuration.value=ev.target.currentTime} 然后就是获取资源总时长 @loadedmetadata="loadEdmetadata" 通过ev.target.duration获取总时长(duration这里要点开ev仔细去找对应名称,一开始看了几遍没发现..) ...
// 获取视频第一帧并且保存为图片 const findVideoCover = () => { nextTick(()=> { let size = 160 const video = document.getElementById('videoPlay') // debugger debugger video.width = size video.height = size video.currentTime = 1 const canvas = document.createElement('canvas') canvas....
获取视频第一帧 // 使用示例getVideoposter(url,512,300).then((base64Data)=>{letblob=dataURLtoBlob(base64Data);letnewName=`${file.name.split(".")[file.name.split(".").length-2]}.png`;letnewFile=blobToFile(blob,newName);// 通过上传方法上传至服务器获取返回的URLuploadImg(newFile).th...
一. 用video.js实现视频播放 安装video.js插件,这里我们使用的是在index.html中引入的本地css //引入video插件 <script src="/public/static/js/video.min.js"></script> <script src="/public/static/js/videojs-contrib-hls.min.js"></script> ...
</video> </div> </template> <script> export default { data() { return { videoSrc: require('@/assets/video.mp4') // 使用require导入视频文件 }; } }; </script> 在这个示例中,我们使用了Vue3的<template>语法来嵌入视频文件,并在data函数中定义了videoSrc属性,用于存储视频文件的路径。我们通过...
3.增加一个组件Videoplayer 1<template>2<div class="course_node_video">3<video-player4class="video-player vjs-custom-skin"5ref="videoPlayerRef"6:playsinline="true"7:options="playerOptions"8@ready="playerReadied"9@pause="onPlayerPause($event)"10@timeupdate="onPlayerTimeupdate($event)"11customE...
Vue3-video-play适用于 Vue3 的 hls.js 播放器组件 | 并且支持MP4/WebM/Ogg格式。 1、支持快捷键操作 2、支持倍速播放设置 3、支持镜像画面设置 4、支持关灯模式设置 5、支持画中画模式播放 6、支持全屏/网页全屏播放 7、支持从固定时间开始播放
}// 获取缓冲进度function progress {if (!video.value) return;percentageBuffer.value = Math.floor((video.value.buffered.length? video.value.buffered.end(video.value.buffered.length - 1) /video.value.duration: 0) * 100);}// 时间改变function durationchange {endTime.value = second(video.value....
4. 配置和使用Video.js播放器功能 你可以在初始化播放器时通过options对象配置Video.js的各种功能,如自动播放、循环播放、静音等。此外,Video.js提供了丰富的API,允许你控制播放器的各种行为,如播放、暂停、获取当前播放时间等。 例如,你可以在组件的方法中添加控制播放器的逻辑: javascript methods: { playVideo()...