vue video和vue-video-player实现视频铺满教程 - CSDN文库

103 浏览量更新于2023-05-04 收藏 197KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

vue video和和vue-video-player实现视频铺满教程实现视频铺满教程

网页放置视频播放器，我一般都是用video.js和它的插件vue-video-player

一：一：Video.js

需求：对于简单的视频播放需求来说，video.js足以胜任了。

它可是支持HTML5和Flash的视频播放器呦。

1：安装：安装video.js

npm install -s video.js

2:在在main.js文件中引入相关文件文件中引入相关文件

import Video from 'video.js'

import 'video.js/dist/video-js.css'

Vue.prototype.$video = Video

3:在组件中使用在组件中使用

<template>

<div class="video_text">

<video

id="myVideo"

class="video-js"

>

<source

:src="videoUrl"

type="video/mp4"

>

</video>

</div>

</template>

<script>

export default {

name: "Video",

data() {

return {

videoUrl:'...',//视频地址

};

},

mounted() {

this.initVideo(); //初始化视频播放器

},

methods: {

initVideo() {

//初始化视频方法

let myPlayer = this.$video(myVideo, {

//是否显示控制栏

controls: true,

//是否自动播放,muted:静音播放

autoplay: false,

//是否静音播放

muted:false,

//是否流体自适应容器宽高

fluid:true,

//设置视频播放器的显示宽度（以像素为单位）

width: "800px",

//设置视频播放器的显示高度（以像素为单位）

height: "400px"

});

}

}

};

</script>

<style lang="less">

.video_text{

width: 70%;

margin: 0 auto;

}

video:focus{

outline: 0; //去掉选中蓝框

}

.video-js .vjs-big-play-button{

/*对播放按钮的样式进行设置*/

width: 100px;

height: 60px;

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余8页未读，立即下载

weixin_38524139

粉丝: 7
资源: 916

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈