Vue中视频组件vue-video-player

实现效果如图：在页面中展示，可放大至全屏

1.安装（因为最新版本有问题我现在安装的版本是npm install vue-video-player@5.0.1 --save）

npm install vue-video-player@5.0.1 --save

2.在main.js中添加

import VideoPlayer from 'vue-video-player/src';
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'
Vue.use(VideoPlayer)

2.建一个组件

组件里面贴入代码

<template><div class="video"><!-- 使用组件 --><video-player  class="video-player vjs-custom-skin"ref="videoPlayer":playsinline="true":options="playerOptions"></video-player></div>
</template><script type="text/ecmascript-6">
// 以下三行一定要引入
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
// import 'video.js/dist/lang/zh-CN'export default {// name: 'videoplayer',components: { // 必需引入videoPlayer},props: [ // 接收父组件的数据'mp4Pic','mp4Url'],data () {return {fileAreaHeight: 100,fileType: 'mp4', // 资源的类型}},computed: { // 使用计算属性playerOptions () {const playerOptionsObj = {playbackRates: [0.7, 1.0, 1.5, 2.0], //视频播放速度autoplay: false, // 如果true，浏览器准备好时开始回放。muted: false, // 默认情况下将会消除任何音频。loop: false, // 导致视频一结束就重新开始。// preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）。language: 'zh-CN',// aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）。fluid: false, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。sources: [{type: 'video/' + this.fileType, // 资源格式写法：'video/mp4'，否则控制台会出现notSupportedMessage设置的错误。src: this.mp4Url // 视频url地址}],poster: this.mp4Pic, // 视频封面地址// width: document.documentElement.clientWidth,height: this.fileAreaHeight,  // 设置高度，fluid需要设置成flasenotSupportedMessage: '此视频暂无法播放...', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。controlBar: {timeDivider: true,durationDisplay: true,remainingTimeDisplay: false,fullscreenToggle: true  //全屏按钮}}return playerOptionsObj}},watch: {}}
</script><style lang="scss">.video /*可不设置*/{// position:relative;// padding:5px;// padding-top: 70px;//  .vjs-poster /*对画面静止的样式进行设置放大一倍*///  {//        transform: scale(2)//  }//  .vjs-tech /*对画面播放的样式进行设置放大一倍*///  {//      transform: scale(2)//  }//   .video-js .vjs-big-play-button /*对播放按钮的样式进行设置*///   {//       width: 80px;//         height: 100%;//         border-radius: 1em;//   }}</style>

3.回到展示页面引入组件

import Videoplayer from '@/components/Video';

components:{Videoplayer},

4.页面代码template （当文件类型为1时则展示视频）

<div v-if="listQuery.docType === 1">   <Videoplayer :mp4Url="listQuery.docContent"></Videoplayer>
</div>

5.methods:里面调接口查询时就可以显示啦

Vue中视频组件vue-video-player相关推荐

vue 上传图片视频组件，可拍照选择照片，解决苹果手机拍照旋转问题
vue 上传图片视频组件,可拍照选择照片,解决苹果手机拍照旋转问题参考文章: (1)vue 上传图片视频组件,可拍照选择照片,解决苹果手机拍照旋转问题 (2)https://www.cnblogs. ...
vue中组件的导出导入_5.2 vue中 keep-alive 组件的作用，详细解释keep-alive使用方法...
问题:vue中 keep-alive 组件的作用 keep-alive:主要用于保留组件状态或避免重新渲染. 比如: 有一个列表页面和一个详情页面,那么用户就会经常执行打开详情=>返回列表=& ...
vue中父子组件先后渲染_Vue中父子组件执行的先后顺序
前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看法. 问题如下:请问下图中父子组件执行的先后顺序? 首先, ...
vue中父子组件及 watch用法
父子组件及 watch vue中父子组件及 watch用法 - coder_zhang123456 - 博客园
Vue中父子组件传值的多种方式
vue中父子组件传值 vue中的父子组件传值,值得注意的是要遵守单向数据流原则.所谓单向数据流原则,简单的说就是父组件的数据可以传递给子组件,子组件也可以正常获取并使用由父组件传过来的数据:但是,子组 ...
通过大头儿子和小头爸爸，给女朋友讲明白了vue中父子组件的传值
写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法感兴 ...
Vue中父子组件的六种通信方式
Vue中父子组件的通信方式一.Props + $emit Props:父传子父组件Parent.vue: <Child :message="message" @chang ...
ant design vue 中Upload组件如何自定义文件列表的样式
ant design vue 中Upload组件如何自定义文件列表的样式问题历程 UploadList 组件源码 h() 方法实现注问题技术:vue.ant design vue 在开发项 ...
[vue] 怎么捕获组件vue的错误信息？
[vue] 怎么捕获组件vue的错误信息? errorHandler 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面试题

Vue中视频组件vue-video-player

Vue中视频组件vue-video-player相关推荐

最新文章

热门文章