1.安装vue-video-player

npm install vue-video-player --save

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.在页面中使用

<template><div  class="video-demo"><video-player  id="video" class="video-player vjs-custom-skin"ref="videoPlayer":playsinline="true"style="object-fit:fill":options="playerOptions":x5-video-player-fullscreen="true"@pause="onPlayerPause($event)"@play="onPlayerPlay($event)"@fullscreenchange="onFullscreenChange($event)"@click="fullScreen"></video-player></div>
</template>

4.配置数据

 playerOptions: {playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度autoplay: true, //如果true,浏览器准备好时开始回放。muted: false, // 默认情况下将会消除任何音频。loop: false, // 导致视频一结束就重新开始。preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）language: 'zh-CN',aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。sources: [{src: '',  // 路径type: 'video/mp4'  // 类型}],// poster: "../../static/images/test.jpg", //你的封面地址// width: document.documentElement.clientWidth,notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。controlBar: {timeDivider: true,durationDisplay: true,remainingTimeDisplay: false,fullscreenToggle: true  //全屏按钮}}

5.方法目前还不完善以后..再。。。。。

可参考 较详细：https://www.jb51.net/article/173816.htm

6.在其他组件调用

<vueVideoPlayer :src="data.url" :cover_url="data.cover_url" />import vueVideoPlayer from './module/vueVideoPlayer'  // 引入视频组件components： {vueVideoPlayer
}

vue-video-player 实现动态渲染后端传来的视频

html

<template><div class="container"><div class="content"><div class="nav"><!-- 选项卡标题图片 挺垃圾的可以改为 :src="img" --><ul class="tabs"><li @click="nowschool()" class="now"><imgsrc="http://yikaojs.jymmy.cn/static/img/now2.png"alt=""class="activeone"/><imgsrc="http://yikaojs.jymmy.cn/static/img/now.png"alt=""style="display: none"class="unactiveone"/></li><li @click="allschool()" class="all"><imgsrc="http://yikaojs.jymmy.cn/static/img/all.png"alt=""class="unactive"/><imgsrc="http://yikaojs.jymmy.cn/static/img/all2.png"alt=""style="display: none"class="active"/></li></ul><!-- 选项卡内容 --><div class="cards" style="background: white; height: 200px"><!-- 循环出多个小视频box --><div class="tab-now tabcards" id="tabone" style="display: block"><divclass="box"v-for="(item, index) in videos":key="index"@click="getVideoDetail(index)"><div class="video-small"><video-playerclass="video-player-box"ref="videoPlayer":options="videoConfig[index]":playsinline="true"></video-player></div><div class="text"><div class="jigou">{{ item.mechanism }}</div><div class="bottom"><div class="name">{{ item.username }}</div><div class="time">{{ item.published_time | momentTime }}</div></div></div></div></div><div class="tab-all tabcards" style="display: none"><divclass="box"v-for="(item, index) in videos":key="index"@click="getVideoDetail(index)"><div class="video-small"><video-playerclass="video-player-box"ref="videoPlayer":options="videoConfig[index]":playsinline="true"></video-player></div><div class="text"><div class="jigou">{{ item.mechanism }}</div><div class="bottom"><div class="name">{{ item.username }}</div><div class="time">{{ item.published_time | momentTime }}</div></div></div></div></div></div><!-- 分页 --><div class="block"><el-paginationlayout="prev, next":total="totalCount":page-size="8":current-page="currentPage"@size-change="handleSizeChange"@current-change="handleCurrentChange"></el-pagination></div><!-- 弹窗 点击小视频弹出大视频及详情--><div class="tan"><el-dialog :visible.sync="dialogFormVisible" @close="closeDialog"><div class="videoall"><div class="video-demo"><video-playerid="video"class="video-player vjs-custom-skin"ref="videoPlayer":options="playerOptions":playsinline="true":destroy-on-close = "true"style="width: 1004px; height: 435px"></video-player></div><div class="textall"><div class="toptext"><div class="name" style="color: #bbbbbb">{{ pinlun.username }}</div><div class="jigou1" style="color: #bbbbbb">{{ pinlun.mechanism }}</div></div><div class="heng"></div><div class="text"><div class="top"><div class="image"><img :src="pinlun.head_img" alt="" /></div><div class="top-right"><div class="names">大毛子</div><div class="times" style="color: #bbbbbb">{{ pinlun.dianpingtime | momentTimeFull }}</div></div></div><div class="detail">{{ pinlun.dptext }}</div></div></div></div><!-- <div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="dialogFormVisible = false">确 定</el-button></div> --></el-dialog></div></div></div><!-- 上传视频弹窗 --><div class="tovideo"><divclass="videobtn"style="height: 100px; width: 100px"@click="dialogVisible = true"><img src="http://yikaojs.jymmy.cn/static/img/shipinsc.png" alt="" /></div><el-dialog :destroy-on-close="true" :visible.sync="dialogVisible"><Comment ref="upload_dialog"></Comment></el-dialog></div><key></key><back :backData="backGo"></back></div>
</template>

js

此处用到 Vue--moment时间格式插件安装和使用（可参考）

此处用到 elementUI实现分页 - 简书

关于vue中的videoPlayer的src视频地址参数动态修改（网上一堆错误方法，被误导很久，自己找到了正确的方法，供大家借鉴） - 蔡文君 - 博客园

<script>
import back from "./conmon/back";
import key from './conmon/key'
import Comment from './comment.vue'  //引入视频上传页面
import moment from 'moment'   //引入时间组件
export default {components: {back,key,Comment //视频上传},data () {return {backGo: '',dialogFormVisible: false,  //弹窗初始化关闭dialogVisible: false,currentPage: 1,   // 默认显示第几页totalCount: 0,// 总条数currentType: 1,PageSize: 8,  // 默认每页显示的条数videoConfig: [],pinlun: {},videos: [],//小视频 数据配置playerOptions: {playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度autoplay: true, //如果true,浏览器准备好时开始回放。muted: false, // 默认情况下将会消除任何音频。loop: false, // 导致视频一结束就重新开始。preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）language: 'zh-CN',aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。sources: [{src: '',  // ---路径为空方便动态赋值---type: 'video/mp4'  // 类型}],// poster: "../../static/images/test.jpg", //你的封面地址// width: document.documentElement.clientWidth,notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。controlBar: {timeDivider: true,durationDisplay: true,remainingTimeDisplay: false,fullscreenToggle: true  //全屏按钮}}}},mounted () {this.getData()},//过滤器filters: {momentTime (times) {return moment(times*1000).format('YYYY-MM-DD')  //显示时间的格式},momentTimeFull (times) {return moment(times*1000).format('YYYY-MM-DD HH:mm:ss')}},methods: {//选项卡改变事件nowschool () {// alert(123)$(".activeone").css("display", "block");$(".unactiveone").css("display", "none");$(".active").css("display", "none");$(".unactive").css("display", "block");$(".tab-now").css("display", "block");$(".tab-all").css("display", "none");this.currentPage = 1;  //显示第一页this.currentType = 1;  //此页面标识为1this.getData(this.currentType, this.currentPage)},allschool () {$(".active").css("display", "block");$(".unactive").css("display", "none");$(".activeone").css("display", "none");$(".unactiveone").css("display", "block");$(".tab-now").css("display", "none");$(".tab-all").css("display", "block");this.currentPage = 1;this.currentType = 2;//此页面标识为2this.getData()},//关闭弹框的事件closeDialog () {this.$refs.videoPlayer.player.pause(); //视频暂停},// 分页// 每页显示的条数handleSizeChange (val) {console.log(val)// 改变每页显示的条数 // this.PageSize = val// // 注意：在改变每页显示的条数时，要将页码显示到第一页// this.currentPage = 1},// 显示第几页handleCurrentChange (val) {console.log(val)this.currentPage = valthis.getData()// 改变默认的页数的// this.currentPage = val},getData () {this.videos = []this.videoConfig = []var urll = ''var uuid = JSON.parse(sessionStorage.getItem('cache')).user.id  var getdata = {}   //将页面中的数据传入 定义的空数组中 再传给后端//根据不同页面调用接口if (this.currentType === 1) {//当前校区urll = this.$api.pkapi + '后端接口'getdata['id'] = uuid} else if (this.currentType === 2) {//全国精选urll = this.$api.pkapi + '后端接口'}getdata['page'] = this.currentPagegetdata['list_rows'] = this.PageSizethis.$axios({url: urll,  //接口路径params: getdata, //参数集合}).then((res) => {console.log(res)console.log(res.data.code === 0)if (res.data.code === 1) {this.videos = res.data.data.data  //获取总数据（包含视频数据）this.totalCount = res.data.data.total //获取总页数//处理视频配置 循环取出多个视频放入videoConfig数组中for (let i in this.videos) {this.videoConfig.push({autoplay: false, //如果true,浏览器准备好时开始回放。muted: true, // 默认情况下将会消除任何音频。loop: false, // 导致视频一结束就重新开始。controls: false,preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）language: 'zh-CN',aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。sources: [{src: this.videos[i].video,  // 获取视频路径type: 'video/mp4'  // 类型}],// poster: "../../static/images/test.jpg", //你的封面地址// width: document.documentElement.clientWidth,notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。controlBar: {timeDivider: false,durationDisplay: false,remainingTimeDisplay: false,fullscreenToggle: false  //全屏按钮}})}}}).catch((err) => {console.log(err)})},//点击小视频获取对应的大视频数据getVideoDetail (index) {this.pinlun = {}this.dialogFormVisible = truevar vid = this.videos[index].idthis.$axios({url: this.$api.pkapi + '后端接口',params: {id: vid},}).then((res) => {console.log(res)console.log(res.data.code === 0)if (res.data.code === 1) {this.playerOptions.sources[0].src = res.data.data.video //获取后端视频路径动态赋值console.log(this.playerOptions.sources[0].src);this.pinlun = res.data.data   //获取弹窗中信息}}).catch((err) => {console.log(err)})}}
}</script>

css


<style scoped>
.container {width: 1920px;height: 1080px;background: url("http://yikaojs.jymmy.cn/static/img/bei1.png");position: relative;
}
.content {width: 1720px;height: 829px;margin: auto;padding-top: 20px;position: relative;top: 20%;border-radius: 10px;background: rgba(255, 245, 245, 0.3);
}
.nav {width: 1680px;height: 794px;margin: auto;border-radius: 10px;background: #ffffff;/* position: relative; */
}
.tabs {width: 50%;margin: auto;display: flex;justify-content: space-around;position: relative;top: -20%;
}
.tabcards {width: 90%;height: 640px;margin: -25px auto;/* background: chartreuse; */padding-left: 5px;z-index: 999999;
}
.box {height: 246px;width: 350px;border-radius: 10px;position: relative;float: left;margin: 30px 12px;
}
.video-small {height: 246px;width: 350px;background: rgba(29, 28, 28, 0.3);border-radius: 10px;
}
.video-small >>> .video-js {height: 246px;width: 360px;border-radius: 10px;background-color: transparent;
}
.video-small >>> .video-js .vjs-big-play-button {display: none;
}
.box > .text {width: 100%;height: 83px;background: rgba(0, 0, 0, 0.61);color: white;position: absolute;bottom: 0;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;
}
.jigou {font-size: 20px;/* text-align: left; */margin-left: 38px;margin-top: 5px;margin-bottom: 5px;
}
.bottom {display: flex;justify-content: space-around;
}
.name {font-size: 29px;
}
.time {margin-top: 12px;font-size: 18px;
}
.el-pagination {/* background: red; *//* color: #ffffff; */height: 50px;position: relative;top: 72px;
}.el-pagination >>> .btn-prev {width: 70px;height: 70px;background: url("http://yikaojs.jymmy.cn/static/img/left.png");position: absolute;left: 15px;color: white;
}
.el-pagination >>> .btn-next {width: 70px;height: 70px;background: url("http://yikaojs.jymmy.cn/static/img/right1.png");position: absolute;right: 15px;color: white;
}
.el-pagination >>> .btn-prev:disabled {width: 70px;height: 70px;color: white;background: url("http://yikaojs.jymmy.cn/static/img/left1.png");
}
.el-pagination >>> .btn-next:disabled {width: 70px;height: 70px;color: white;background: url("http://yikaojs.jymmy.cn/static/img/right.png");
}
.tan {width: 1249px;height: 959px;/* background: greenyellow; */
}.tan >>> .el-dialog {width: 1249px;height: 990px;/* margin: auto; */margin-top: 5% !important;background: url("http://yikaojs.jymmy.cn/static/img/tan2.png") no-repeat;background-size: 100% 100%;box-shadow: none;
}
/* 叉号 */
.tan >>> .el-dialog__headerbtn {height: 40px;width: 42px;background: url("http://yikaojs.jymmy.cn/static/img/cha.png") no-repeat;background-size: 100% 100%;margin: 15px;
}
.videoall {height: 850px;width: 1004px;margin: auto;
}
.video-demo {width: 1004px;height: 435px;margin: auto;border-radius: 10px;
}
.video-demo >>> .video-js .vjs-tech {width: 100%;height: 100%;margin: auto;border-radius: 10px;
}
.textall {width: 100%;height: 330px;margin: auto;position: relative;top: 15%;/* background: tomato; */
}
.toptext {
margin-bottom: 5px;
}
.jigou1 {color: white;font-size: 20px;/* margin: 1px 0; */
}
.heng {background: white;width: 100%;height: 2px;border-radius: 1px;opacity: 0.1;/* position:absolute;top: 34%; */
}
.text {height: 250px;width: 100%;/* background: turquoise; */margin-top: 15px;
}
.top {width: 30%;height: 85px;display: flex;justify-content: space-around;
}
.image {height: 85px;width: 94px;
}
.image > img {height: 85px;width: 94px;
}
.names {color: white;font-size: 29px;font-weight: bold;
}
.times {margin-top: 12px;font-size: 18px;
}
.detail {height: 155px;width: 86%;/* margin-top: 10px; */background: #23232e;border-radius: 10px;color: white;padding: 10px 20px;position: absolute;right: 0;
}
.container > .tovideo {position: absolute;right: -10px;top: 35%;
}
.tovideo >>> .el-dialog {width: 1249px;height: 809px;border-radius: 4px;background: url("http://yikaojs.jymmy.cn/static/img/tan.png") no-repeat;background-size: 100% 100%;
}
.tovideo >>> .el-dialog__headerbtn {height: 40px;width: 42px;background: url("http://yikaojs.jymmy.cn/static/img/cha.png") no-repeat;background-size: 100% 100%;margin: 15px;
}
</style>

效果图：

小视频展示页面

大视频详情展示页面

vue-video-player 实现动态渲染后端传来的视频相关推荐

Vue基础篇六：Vue使用JSX进行动态渲染
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
七十、Vue城市页面Ajax动态渲染和兄弟组件数据传递
2020/10/29. 周四.今天又是奋斗的一天. @Author:Runsen 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...
vue中手写动态渲染左右滚动菜单栏点击居左以及设置scrollLeft属性设置无效的原因解决
vue中可能会碰到无法使用框架的问题,此时需要手写左右滚动的滑动菜单栏,并且头部或者底部还有对应的标题点击定位.此时应该怎么做呢? (1)下面看结构: <div class="cour ...
Vue.js使用Echarts动态渲染多个图表
@Author: 雨 <雨> @Date: 2020-07-04T15:44:54+15:00 @Email: 2607503865@qq.com @Last modified by: S ...
html选择本地文件视频并播放器,使HTML5视频播放器播放不同的文件(Make a HTML5 video player play a different file)...
使HTML5视频播放器播放不同的文件(Make a HTML5 video player play a different file) 在播放视频时,我无法让HTML5播放器播放不同的视频,我尝试更改 ...
Unity播放带Alpha通道的视频【WebM+Video Player】（替代播放GIF方案）
在Unity中播放GIF或者动态效果,可以通过Video Player播放带透明通道的WebM视频来实现. 制作带Alpha的MOV视频制作带Alpha通道的MOV视频有多重方式,如AE.PR.PS ...
vue渲染动态渲染图片_动态/动态渲染视频和音频
vue渲染动态渲染图片 Vue-Viaudio (vue-viaudio) Dynamically/Reactively render videos and audios. 动态/动态渲染视频和音频. ...
vue 动态获取的图片路径不显示_Vue中img的src是动态渲染时不显示的解决
Vue中img的src是动态渲染时不显示的解决今天在项目中遇到一个需求,设计稿如下就是展示用户头像,数据从后端获取,要是没有拿到则显示默认图片. 项目采用vue开发,本人也是第一次在实际项目中使用 ...
vue 如何解析原生html,VUE渲染后端返回含有script标签的html字符串示例
VUE渲染后端返回含有script标签的html字符串示例发布时间:2020-09-14 23:37:52 来源:脚本之家阅读:207 作者:冷幽悠在接入支付宝支付模块的时候,支支返回的是一个f ...

vue-video-player 实现动态渲染后端传来的视频

1.安装vue-video-player

2.在main.js入口文件中引入

3.在页面中使用

4.配置数据

5.方法目前还不完善以后..再。。。。。

6.在其他组件调用

vue-video-player 实现动态渲染后端传来的视频

效果图：

小视频展示页面

大视频详情展示页面

vue-video-player 实现动态渲染后端传来的视频相关推荐

最新文章

热门文章

vue-video-player 实现动态渲染后端传来的视频

1.安装vue-video-player

2.在main.js入口文件中引入

3.在页面中使用

4.配置数据

5.方法目前还不完善 以后..再。。。。。

6.在其他组件调用

vue-video-player 实现动态渲染后端传来的视频

效果图：

小视频展示页面

大视频详情展示页面

vue-video-player 实现动态渲染后端传来的视频相关推荐

最新文章

热门文章

5.方法目前还不完善以后..再。。。。。