vue 移动端播放器（vue-core-video-player-基于vue.js的播放器组件）

vue-core-video-player-基于vue.js的播放器组件一介绍一款基于vue.js的轻量级的视频播放器插件插件个性化配置i18n服务端渲染画中画模式事件订阅易于开发移动端适配1.1官方文档https://core-player.github.io/vue-。

一款基于 vue.js 的轻量级的视频播放器插件插件

• 个性化配置
• i18n
• 服务端渲染
• 画中画模式
• 事件订阅
• 易于开发
• 移动端适配

https://core-player.github.io/vue-core-video-player/zh/get-started.HTML

NPM

npm install --save vue-core-video-player

或者使用 yarn

yarn add -S vue-core-video-player

默认英语，你如果想成中文就加一个langen: 英语zh-CN: 简体中文jp: 日本

import VueCoreVideoPlayer from 'vue-core-video-player'Vue.use(VueCoreVideoPlayer)//或者Vue.use(VueCoreVideoPlayer, {lang: 'zh-CN'})

Use custom language data

import VueCoreVideoPlayer from 'vue-core-video-player'const kr = {..."dashboard" : {"btn": {...."pause": "일시적인","fullscreen": "전체화면","exitFullscreen": "전체 화면 종료",},}Vue.use(VueCoreVideoPlayer, {lang: kr})

<div ><div ><vue-core-video-player src="http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4"></vue-core-video-player></div></div>

外部路径：非常简单！就是直接上！

<vue-core-video-player src="http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4"> </vue-core-video-player>

本地路径：不能直接./assets/1.mp4，无效的。需要使用require("...")

<template><div ><vue-core-video-player :src="url"></vue-core-video-player></div></template><script>export default{data(){return{url:require("./assets/1.mp4")}}}</script>

<template><div ><vue-core-video-player :src="mp4_url"></vue-core-video-player></div></template><script>export default{data(){return{mp4_url: [{src: 'http://rb1x3v1fm.sabkt.gdipper.com/致命诱惑320p.mp4',resolution: 360,},{src: 'http://rb1x3v1fm.sabkt.gdipper.com/致命诱惑720p.mp4',resolution: 720,},{src: 'http://rb1x3v1fm.sabkt.gdipper.com/致命诱惑4k.mp4',resolution: '4k',}],}}}}],}}}</script>

const videoSource = [{src: 'https://media.vued.vanthink.cn/sparkle_your_name_am720p.webm',Type: 'video/webm',}, {src: 'https://media.vued.vanthink.cn/sparkle_your_name_am720p.mp4',type: 'video/mp4',}]

// 底部控制栏 controls 属性 可以用来控制底部控制栏的显示隐藏// 1 String 类型'fixed' 表示底部导航栏会一直固定显示；'auto' 表示底部导航栏在用户未产生任何交互操作后自动消失，默认的形式；// 2 boolean 类型false 表示始终不显示导航栏；true 默认值；它和设置 'auto' 形式类似；

//如果你设置了 autoplay, 播放器会尝试自动播放视频；//由于不同的浏览器对自动播放行为的限制不一样；//如果播放器自动播放失败会显示播放按钮，方便用户手动触发

组件保持了和原生 HTML Video 属性配置的对接

案例

<vue-core-video-player :src="mp4_url":muted="true":autoplay="false"preload="nona":loop="true"controls="auto"cover='https://img1.wxzxzj.com/vpc-example-cover-your-name-c.png'></vue-core-video-player>

VueCoreVideoPlayer遵循W3C标准的媒体事件API,你可以前往MDN获取这些细节，下面罗列一些非常常用的事件：

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

<template><div ><vue-core-video-player @loadedmetadata="loaded" @play="playFunc" @pause="pauseFunc" src="./videos/your_video.mp4"></vue-core-video-player></div><template><script>export default {methods: {loaded () {// your code},playFunc () {// your code},pauseFunc () {<span >// your code</span>}<span >// your code</span>}}}

播放错误偶有发生， 我们提供了播放错误码方便开发者或者用户了解一些原因.

<template><div ><vue-core-video-player @error="errorHandle" src="./videos/your_video.mp4"></vue-core-video-player></div><template><script>export default {methods: {errorHandle (e) {// handle error},}}

HLS（HTTP Live Streaming）——基于HTTP的自适应码率流媒体传输协议。HLS描述了一组通过互联网提供音视频服务的工具和程序。一个视频可以被分割成多个视频切片，这些切片的传送位置和顺序在一组被称为播放列表的XML文件中，该文件以文件扩展名m3u8结尾。人们可以使用兼容了HLS的播放器播放视频

playcore-hls 是一款 HLS 解码插件，方便支持 HLS 的播放。

$ npm install @core-player/playcore-hls --save

copy<template><div ><div ><vue-core-video-player :core="HLSCore" src="your_file.m3u8"></vue-core-video-player></div></div></template><script>import VueCoreVideoPlayer from 'vue-core-video-player'import HLSCore from '@core-player/playcore-hlsVue.use(VueCoreVideoPlayer)export default {name: 'App',data () {return {HLSCore}}}</script>

原文地址：vue-core-video-player-基于vue.js的视频播放器组件 - Iron_Man-super - 博客园