video-player组件使用

1安装

npm install vue-video-player --save

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)

组件使用

<template><div class="video"><!-- 使用组件 --><video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true":options="playerOptions"></video-player></div>
</template>
<script>export default {// components: { // 必需引入//     videoPlayer// },props: ["mp4Url","mp4Pic"],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},},methods: {// 调用全屏放大fullScreen() {const player = this.$refs.videoPlayer.playerplayer.requestFullscreen()//调用全屏api方法player.isFullscreen(true)player.play()}},created() {console.log(this.mp4Url)},}
</script>

父组件

<template>
<div><!-- mp4视频 --><videoPlayer :mp4Url="mp4Url" ::mp4Pic="mp4Pic"></videoPlayer>
</div>
</template>

// 引入MP4组件import videoPlayer from '../sub/video.vue'

 export default {name: "frist",components: {videoPlayer},data() {return {mp4Url: '',mp4Pic:'这是一个视频'}},created(){//引入视频this.mp4Url=require('../../assets/img/1通讯录4.mp4')},}

video-player组件使用相关推荐

Unity流水账2：视频播放之Video Player
VideoPlayer组件使用VideoPlayer组件可以将视频文件附加到GameObjecs,并在运行时,在GameObject的Texture上播放它们. 默认情况下,Video Pl ...
VR视频播放器Video Player
一.通过blender进行建模 1.下载并进行安装快捷键: ①A:全选 ②X:把场景中所有的组件都删掉,按下X后点击Delete X ,则场景会被清空 ③Shift+A:生成一个物体或 ...
html angular video视频组件
html angular video视频组件官方网站项目地址博主提供的下载地址文档地址 Videogular Videogular is an HTML5 video player for A ...
Vue3封装Video.js组件(基于video.js)
Vue3封装Video.js组件话不多说直接上代码在项目中安装Video.js 通过npm安装video.js npm install video.js --save Video.js组件的封装 ...
使用Raw Image和Unity自带的视频播放插件Video Player
使用Raw Image和Unity自带的视频播放插件Video Player导致视频不清晰先创建Raw Image 在Raw Image身上添加Video Player和Audio Source组件 ...
html5播放器迅雷,搜狗浏览器HTML5视频播放器插件(HTML5.Video.Player)
一款搜狗浏览器的HTML5视频播放器插件,安装后可以使用HTML5方式播放优酷.土豆.爱奇艺.搜狐视频.迅雷离线.腾讯视频.56视频等网站的视频,避免使用adobe flash player插件,降低 ...
html选择本地文件视频并播放器,使HTML5视频播放器播放不同的文件(Make a HTML5 video player play a different file)...
使HTML5视频播放器播放不同的文件(Make a HTML5 video player play a different file) 在播放视频时,我无法让HTML5播放器播放不同的视频,我尝试更改 ...
C#(Winform)程序无法使用Windows Media Player 组件播放视频文件
如果你的C#(Winform)程序无法使用Windows Media Player 组件播放视频文件(一旦点击播放立马程序闪退,但可以播放音频文件),请按照下面图例设置) 1.桌面右击鼠标找到独立显 ...
微信小程序——video视频组件
video视频组件 video.wxml文件 <view><video src="{{src}}" binderror="videoErrorCallb ...
Android Video Player. 安卓视频播放器，封装 MediaPlayer、ExoPlayer、IjkPlayer。模仿抖音，悬浮播放，广告播放，列表播放，弹幕
DKVideoPlayer 项目地址:dueeeke/DKVideoPlayer 简介: Android Video Player. 安卓视频播放器,封装 MediaPlayer.ExoPlayer. ...

video-player组件使用

1安装

main.js引入

组件使用

父组件

video-player组件使用相关推荐

最新文章

热门文章