大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

vue视频播放插件vue-video-player的具体使用方法

安装

成都创新互联是一家集网站建设,鹿寨企业网站建设,鹿寨品牌网站建设,网站定制,鹿寨网站建设报价,网络营销,网络优化,鹿寨网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

npm install vue-video-player --save

引入

可以全局引入插件,也可以在需要用到该插件的组件内单独引入(二选一)

【1】全局引用, 在main.js里面导入并引用

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

【2】组件内引用import { videoPlayer } from 'vue-video-player'

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

export default {
 components: {
 videoPlayer
 }
}

使用

【1】html部分 

【2】js部分   

export default {
  data() {
  return {
   playerOptions: {
   playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
   autoplay: false, // 如果为true,浏览器准备好时开始回放。
   muted: false, // 默认情况下将会消除任何音频。
   loop: false, // 是否视频一结束就重新开始。
   preload: 'auto', // 建议浏览器在

【3】效果图​

vue视频播放插件vue-video-player的具体使用方法

视频格式

type:"video/webm" // 可以播放,用ogg也可打开
type:"video/ogg" // 可以播放,用webm也可打开
type:"video/3gp" // 可以播放
type:"video/mp4" // 可以播放
type:"video/avi" // 打不开
type:"video/flv" // 打不开
type:"video/mkv" // 打不开
type:"video/mov" // 打不开
type:"video/mpg" // 打不开
type:"video/swf" // 打不开
type:"video/ts"  // 打不开
type:"video/wmv" // 打不开
type:"video/vob" // 没转化
type:"video/mxf" // 转化出错
type: "video/rm"  // 转化出错

控制播放和暂停

this.$refs.videoPlayer.player.play() // 播放
this.$refs.videoPlayer.player.pause() // 暂停
this.$refs.videoPlayer.player.src(src) // 重置进度条

回调函数

 

 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。


分享名称:vue视频播放插件vue-video-player的具体使用方法
路径分享:http://dzwzjz.com/article/ijhjhe.html
在线咨询
服务热线
服务热线:028-86922220
TOP