vue-core-video-player-基于vue.js的视频播放器组件
一 介绍
一款基于 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
})
第三步:在组件中写入
<div id="app">
<div class="player-container">
<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 id="app">
<vue-core-video-player :src="url"></vue-core-video-player>
</div>
</template>
<script>
export default{
data(){
return{
url:require("./assets/1.mp4")
}
}
}
</script>
二 基本配置
2.1 分辨率切换
<template>
<div id="app">
<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>
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 | 图片地址 | 预览图 |
案例
<vue-core-video-player :src="mp4_url"
:muted="true"
:autoplay="false"
title="致命诱惑"
preload="nona"
:loop="true"
controls="auto"
cover='https://img1.wxzxzj.com/vpc-example-cover-your-name-c.png'
></vue-core-video-player>
三 事件
3.1 基本事件
VueCoreVideoPlayer
遵循W3C
标准的媒体事件API
,你可以前往MDN
获取这些细节,下面罗列一些非常常用的事件:
- play 表示当播放器开始播放或者通过 play() 方法从暂停状态恢复。
- pause 当播放器停止播放的时候触发。
- progress 当播放器正在下载媒体资源。
- loadeddata 当播放器开始加载第一帧时候触发。
- canplay 当加载足够数据可以满足基本播放后触发.。
- durationchange 当媒体获取一定数据,并且完整的解析出 metadata 信息。
- ended 当媒体播放结束时候触发。
- timeupdate 当播放的媒体 currenttime 发生改变时候触发。
- seeked 当用户 seek 操作完成触发。
<template>
<div class="player-container">
<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 class="hljs-comment">// your code</span>
}
}
}
3.2 播放错误
播放错误偶有发生, 我们提供了播放错误码方便开发者或者用户了解一些原因.
<template>
<div class="player-container">
<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
HLS(HTTP Live Streaming)——基于HTTP的自适应码率流媒体传输协议。HLS描述了一组通过互联网提供音视频服务的工具和程序。一个视频可以被分割成多个视频切片,这些切片的传送位置和顺序在一组被称为播放列表的XML文件中,该文件以文件扩展名m3u8结尾。人们可以使用兼容了HLS的播放器播放视频
playcore-hls 是一款 HLS 解码插件,方便支持 HLS 的播放。
4.1 快速开始
$ npm install @core-player/playcore-hls --save
<template>
<div id="app">
<div class="player-container">
<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-hls Vue.use(VueCoreVideoPlayer) export default {
name: 'App',
data () {
return {
HLSCore
}
}
}</script>
vue-core-video-player-基于vue.js的视频播放器组件的更多相关文章
- 手把手从零开始---封装一个vue视频播放器组件
现在,在网页上播放视频已经越来越流行,但是网上的资料鱼龙混杂,很难找到自己想要的,今天小编就自己的亲身开发体验,手把手从零开始---封装一个vue视频播放器组件. 作为一个老道的前端搬砖师,怎么可能会 ...
- 最简单的基于FFMPEG+SDL的视频播放器 ver2 (採用SDL2.0)
===================================================== 最简单的基于FFmpeg的视频播放器系列文章列表: 100行代码实现最简单的基于FFMPEG ...
- 最简单的基于FFMPEG+SDL的视频播放器 ver2 (采用SDL2.0)
===================================================== 最简单的基于FFmpeg的视频播放器系列文章列表: 100行代码实现最简单的基于FFMPEG ...
- 100行代码实现最简单的基于FFMPEG+SDL的视频播放器(SDL1.x)【转】
转自:http://blog.csdn.net/leixiaohua1020/article/details/8652605 版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[-] ...
- 最简单的基于FFMPEG+SDL的视频播放器:拆分-解码器和播放器
===================================================== 最简单的基于FFmpeg的视频播放器系列文章列表: 100行代码实现最简单的基于FFMPEG ...
- 基于<最简单的基于FFMPEG+SDL的视频播放器 ver2 (采用SDL2.0)>的一些个人总结
最近因为项目接近收尾阶段,所以变的没有之前那么忙了,所以最近重新拿起了之前的一些FFMPEG和SDL的相关流媒体播放器的例子在看. 同时自己也用FFMPEG2.01,SDL2.01结合MFC以及网上罗 ...
- 用JavaCV改写“100行代码实现最简单的基于FFMPEG+SDL的视频播放器 ”
FFMPEG的文档少,JavaCV的文档就更少了.从网上找到这篇100行代码实现最简单的基于FFMPEG+SDL的视频播放器.地址是http://blog.csdn.net/leixiaohua102 ...
- 封装:WPF基于MediaElement封装的视频播放器
原文:封装:WPF基于MediaElement封装的视频播放器 一.目的:应用MediaElement创建媒体播放器 二.效果图 三.目前支持功能 播放.暂停.停止.快进.快退.声音大小.添加播放列表 ...
- Vue项目中使用基于Vue.js的移动组件库cube-ui
cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库.很赞,基本场景是够用了,感谢开源!感谢默默奉献的你们. 刚爬完坑,就来总结啦!!希望对需要的朋友有小小的帮助. (一)创 ...
随机推荐
- Ls 命令执行什么功能?可以带哪些参数,有什么区别?
ls 执行的功能:列出指定目录中的目录,以及文件 哪些参数以及区别:a 所有文件 l 详细信息,包括大小字节数,可读可写可执行的权限等
- JDBC 中文编码
在使用JDBC开发的过程中,通常会遇到中文保存到数据库乱码的问题. 这个问题的产生有3个方面: 数据库,包括数据库编码.表编码.字段编码等 在Java Web 程序中,请求对象(Request)未进行 ...
- MyBatis 框架适用场合?
1.MyBatis 专注于 SQL 本身,是一个足够灵活的 DAO 层解决方案. 2.对性能的要求很高,或者需求变化较多的项目,如互联网项目,MyBatis 将是 不错的选择.
- Mybatis 的一级、二级缓存?
1)一级缓存: 基于 PerpetualCache 的 HashMap 本地缓存,其存储作用域为 Session,当 Session flush 或 close 之后,该 Session 中的所有 C ...
- HttpServletRequest.getInputStream()多次读取问题
转自:https://www.jianshu.com/p/85feeb30c1ed HttpServletRequest.getInputStream()多次读取问题 背景 使用POST方法发送数 ...
- Tcp三次握手四次挥手个人学习
最近想跳槽,学习了tcp中的三次握手与四次挥手,特意记录下,加深记忆 SYN 代表请求创建连接 FIN 表示请求关闭连接 ACK 代表确认接受,不管是三次握手还是四次分手,在回应的时候都会加上ACK= ...
- mybatis-02-mapper生成器插件使用
sb_mybatis <?xml version="1.0" encoding="UTF-8"?> <project xmlns=" ...
- git和github学习笔记
1. 了解Git和Github 2. 使用Github 3. Git安装和使用 4. Git基本工作流程 5. Git初始化及仓库创建和操作 6. Git管理远程仓库 7. Github Pages ...
- 顺利通过EMC实验(6)
- Socket.io+Notification实现浏览器消息推送
前言 socket.io: 包含对websocket的封装,可实现服务端和客户端之前的通信.详情见官网(虽然是英文文档,但还是通俗易懂).Notification: Html5新特性,用于浏览器的桌面 ...