vue中使用video-js预览视频(结合vuetify)
后台管理中经常会有一些视频上传的需求,在列表中,往往需要用到视频预览
1:安装
yarn add vue-video-player
2:引用:在main.js中引用
import VideoPlayer from \'vue-video-player\'require(\'video.js/dist/video-js.css\')
require(\'vue-video-player/src/custom-theme.css\')
Vue.use(VideoPlayer)
3:使用(结合你使用框架的dialog即对话框,我使用的是vuetify中的遮罩层,效果一致,便没有使用dialog)
<v-overlay :absolute="false" :value="videoModal">----点击预览按钮后的弹框<v-icon
@click="videoModal=false"
style="font-size:30px;position: absolute;top:-15px;right:-15px;z-index:2;cursor:pointer;"
>mdi-close-circle-outline</v-icon>-----------点击关闭按钮关闭遮罩层
<div class="input_video">
<video-player
class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions"--------设置视频播放的对象
></video-player>
</div>
</v-overlay>
playerOptions: {playbackRates: [0.5, 1.0, 1.5, 2.0],//倍速控制
autoplay: true,//是否自动播放
muted: false,//是否静音播放
loop: false,//是否循环播放
preload: "auto",
language: "zh-CN",
aspectRatio: "16:9",//比例
fluid: true,
sources: [
{
type: "",
src:
"https://blz-videos.nosdn.127.net/1/OverWatch/OVR_D.VA_SHOOTING_STAR_zhCN_YT_PC_3.mp4", //url地址
},
],
poster: "", //你的封面地址
notSupportedMessage: "此视频暂无法播放,请稍后再试",
controlBar: {
timeDivider: true,
durationDisplay: true,//剩余时间是否显示
remainingTimeDisplay: true,//剩余时间是否显示,有一个即可
fullscreenToggle: true,//全屏按钮
},
},
以上是 vue中使用video-js预览视频(结合vuetify) 的全部内容, 来源链接: utcz.com/z/378427.html