基于Vue.js的Web视频播放器插件vue |
您所在的位置：网站首页 › js视频播放器加速代码 › 基于Vue.js的Web视频播放器插件vue |
基于Vue.js的Web视频播放器插件vue
|
前言 今日正式发布一款基于Vue.js的Web视频播放器插件。可配置，操作灵活。跟我一起来体验吧！ 线上地址体验基于vue3.0和vue-vam-video，我开发了一款在线视频播放器。 网址： 代码语言：javascript复制https://www.maomin.club/site/videoplayer/源代码： 代码语言：javascript复制https://github.com/maomincoding/videoplayer 插件一览 界面简约可配置流畅播放支持Vue2和Vue3支持m3u8格式支持多种事件NPM地址 代码语言：javascript复制https://www.npmjs.com/package/vue-vam-video
安装键入命令，即可安装。 代码语言：javascript复制npm install vue-vam-video 源码地址欢迎star！ 代码语言：javascript复制https://github.com/maomincoding/vue-vam-video 配置参数properties: 视频属性videoStyle: 视频样式controlsConfig: 视频控制设置事件事件名称 如何触发 play 媒体收到开始播放的请求 pause 暂停 canplay 播放可以开始 ended 媒体播放过一次就停止了 waiting 暂停播放以下载更多数据 canplaythrough 播放可以继续，不应中断。读取状态为3 error 下载过程中发生网络错误 volumechange volume或muted属性的值已更改 emptied 网络连接中断 ratechange 媒体播放速率更改 empty 发生错误，阻止媒体下载 seeking 播放已移动到新位置 timeupdate 当前时间非常规或意外更改 stalled 浏览器试图下载，但尚未收到数据 abort 下载中断 案例代码语言：javascript复制 import VamVideo from "vue-vam-video"; export default { name: "App", components: { VamVideo }, data: () => ({ videoOption: { properties: { poster: require("./assets/logo.png"), src: // "https://mos-vod-drcn.dbankcdn.cn/P_VT/video_injection/2A1343EFA/v3/6CC21C811065945606293295744/MP4Mix_H.264_1920x1080_6000_HEAAC1_PVC_NoCut.mp4", "https://tv.youkutv.cc/2019/11/12/mjkHyHycfh0LyS4r/playlist.m3u8", preload: "auto", // loop: "loop", // autoplay:"autoplay", // muted:true }, videoStyle: { // width: "1200px", // height: "600px", }, controlsConfig: { fullScreenTit:"全屏", EscfullScreenTit:"退出全屏", speedTit:"倍速", yinliangTit:"音量", jingyinTit:"静音", playTit:"播放", pauseTit:"暂停", fullScreen:true, speed:true, listen:true } }, }), methods:{ playVideo(){ console.log("play"); }, pauseVideo(){ console.log("pause"); }, canplayVideo(){ console.log("canplay"); } } }; |
【本文地址】