安装

cnpm install -S vue-core-video-player

快速使用

# 在main.js中
import VueCoreVideoPlayer from 'vue-core-video-player'
Vue.use(VueCoreVideoPlayer)  # 默认是英文的

'''做国际化'''
import VueCoreVideoPlayer from 'vue-core-video-player'
Vue.use(VueCoreVideoPlayer, {
  lang: 'zh-CN'  # 可以修改成中文
})

# 在你的组件中使用

  

    
  

基本配置

# 设置多分辨率视频，你必须resolution, src,默认的分辨率会选择 '720p'。可以指定选择的分辨率通过resolution这个属性来设置。
const videoSource = [
  {
    src: 'https://media.vued.vanthink.cn/sparkle_your_name_am360p.mp4',
    resolution: 360,
  }, {
    src: 'https://media.vued.vanthink.cn/sparkle_your_name_am720p.mp4',
    resolution: 720,
  }, {
    src: 'https://media.vued.vanthink.cn/y2mate.com%20-%20sparkle_your_name_amv_K_7To_y9IAM_1080p.mp4',
    resolution: 1080
  }
]

视频播放控制

Props	Type	Example	Description
volume	number	0.5	控制视频音量(0-1)
muted	boolean	true	设置为 true, 视频会静音
cover	string	'./cover.png'	显示视频的封面，如果设置 autoplay，自动播放成功后，不会显示
title	string	'your title'	展示视频的标题，方便 SEO
logo	string	'./logo.png'	显示播放器的 logo
loop	boolean	true	会循环播放当前视频
preload	string	'metadata'	'none' 表示不会预加载视频; 'metadata' 表示只加载视频 metadata 信息部分

演示示例

    

        

            
        
    



    export default {
        name: 'app',
        data() {
            return {
                videoSource：'视频地址'
                cover : "显示视频的封面",
                title : "视频的标题"
            }
        }
    }

事件订阅

事件	触发条件
play	表示当播放器开始播放或者通过 play() 方法从暂停状态恢复
pause	当播放器停止播放的时候触发
progress	当播放器正在下载媒体资源
loadeddata	当播放器开始加载第一帧时候触发
canplay	当加载足够数据可以满足基本播放后触发
durationchange	当媒体获取一定数据，并且完整的解析出 metadata 信息
ended	当媒体播放结束时候触发
timeupdate	当播放的媒体 currenttime 发生改变时候触发
seeked	当用户 seek 操作完成触发

演示示例

  

    
  



export default {
  methods: {
    loaded () {
        console.log('视频开始加载第一帧的时候触发')
    },
    playFunc () {
        console.log('播放器开始播放或从暂停到播放状态')
    },
    pauseFunc () {
        console.log('视频停止播放的时候触发')
    }
  }
}

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net

相关推荐: 聊聊 RocketMQ 主从复制

提到主从复制，我们可能立马会联想到 MySQL 的主从复制。 MySQL 主从复制是 MySQL 高可用机制之一，数据可以从数据库服务器主节点复制到一个或多个从节点。 这篇文章，我们聊聊 RocketMQ 的主从复制，希望你读完之后，能够理解主从复制的精髓。 …