vue |
您所在的位置：网站首页 › vue如何设置封面 › vue |
vue
|
一 介绍
一款基于 vue.js 的轻量级的视频播放器插件插件 个性化配置 i18n 服务端渲染 画中画模式 事件订阅 易于开发 移动端适配 1.1 官方文档 https://core-player.github.io/vue-core-video-player/zh/get-started.html 1.2 安装和快速使用 第一步：安装NPM npm install --save vue-core-video-player或者使用 yarn yarn add -S vue-core-video-player 第二步：main.js引入默认英语，你如果想成中文就加一个lang en: 英语 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 }) 第三步：在组件中写入 第四步：本地路径问题外部路径： 非常简单！就是直接上！ 本地路径： 不能直接./assets/1.mp4，无效的。需要使用require("...") export default{ data(){ return{ url:require("./assets/1.mp4") } } } 二 基本配置 2.1 分辨率切换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', }], } } }2.2 不通浏览器播放不同文件 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', } ] 2.3 底部控制栏 // 底部控制栏 controls 属性 可以用来控制底部控制栏的显示隐藏 // 1 String 类型 'fixed' 表示底部导航栏会一直固定显示； 'auto' 表示底部导航栏在用户未产生任何交互操作后自动消失，默认的形式； // 2 Boolean 类型 false 表示始终不显示导航栏； true 默认值；它和设置 'auto' 形式类似； 2.4 自动播放 //如果你设置了 autoplay, 播放器会尝试自动播放视频； //由于不同的浏览器对自动播放行为的限制不一样； //如果播放器自动播放失败会显示播放按钮，方便用户手动触发 2.5 视频播放控制组件保持了和原生 HTML Video 属性配置的对接 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 信息部分 cover string 图片地址 预览图案例 三 事件 3.1 基本事件VueCoreVideoPlayer遵循W3C标准的媒体事件API,你可以前往MDN获取这些细节，下面罗列一些非常常用的事件： play 表示当播放器开始播放或者通过 play() 方法从暂停状态恢复。 pause 当播放器停止播放的时候触发。 progress 当播放器正在下载媒体资源。 loadeddata 当播放器开始加载第一帧时候触发。 canplay 当加载足够数据可以满足基本播放后触发.。 durationchange 当媒体获取一定数据，并且完整的解析出 metadata 信息。 ended 当媒体播放结束时候触发。 timeupdate 当播放的媒体 currenttime 发生改变时候触发。 seeked 当用户 seek 操作完成触发。export default { methods: { loaded () { // your code }, playFunc () { // your code }, pauseFunc () { // your code }} } 3.2 播放错误播放错误偶有发生， 我们提供了播放错误码方便开发者或者用户了解一些原因. export default { methods: { errorHandle (e) { // handle error }, } } 全屏效果图
HLS（HTTP Live Streaming）——基于HTTP的自适应码率流媒体传输协议。HLS描述了一组通过互联网提供音视频服务的工具和程序。一个视频可以被分割成多个视频切片，这些切片的传送位置和顺序在一组被称为播放列表的XML文件中，该文件以文件扩展名m3u8结尾。人们可以使用兼容了HLS的播放器播放视频 playcore-hls 是一款 HLS 解码插件，方便支持 HLS 的播放。 4.1 快速开始 $ npm install @core-player/playcore-hls --save import VueCoreVideoPlayer from 'vue-core-video-player' import HLSCore from '@core-player/playcore-hlsVue.use(VueCoreVideoPlayer) export default { name: 'App', data () { return { HLSCore } } }
|
【本文地址】
今日新闻 |
推荐新闻 |