3分钟快速搭建web服务器,这一篇你值得收藏

Jacquelyn38
• 阅读 1448

前言

今日正式发布一款基于Vue.js的Web视频播放器插件。可配置,操作灵活。跟我一起来体验吧!

线上地址体验

基于vue3.0vue-vam-video,我开发了一款在线视频播放器。

网址:

https://www.maomin.club/site/videoplayer/  

源代码:

https://github.com/maomincoding/videoplayer  

插件一览

3分钟快速搭建web服务器,这一篇你值得收藏

  1. 界面简约

  2. 可配置

  3. 流畅播放

  4. 支持Vue2和Vue3

  5. 支持m3u8格式

  6. 支持多种事件

NPM地址

3分钟快速搭建web服务器,这一篇你值得收藏

https://www.npmjs.com/package/vue-vam-video  

安装

键入命令,即可安装。

npm install vue-vam-video  

源码地址

欢迎star!

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 下载中断

案例

<template>  
  <div id="app">  
    <vam-video  
      :properties="videoOption.properties"  
      :videoStyle="videoOption.videoStyle"  
      :controlsConfig="videoOption.controlsConfig"  
      @play="playVideo"  
      @canplay="canplayVideo"  
      @pause="pauseVideo"  
    ></vam-video>  
  </div>  
</template>  

<script>  
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");  
    }  
  }  
};  
</script>  

  • 欢迎关注我的公众号前端历劫之路

  • 回复关键词电子书,即可获取12本前端热门电子书。

  • 回复关键词红宝书第4版,即可获取最新《JavaScript高级程序设计》(第四版)电子书。

  • 我创建了一个技术交流、文章分享群,群里有很多大厂的前端大佬,关注公众号后,点击下方菜单了解更多即可加我微信,期待你的加入。

3分钟快速搭建web服务器,这一篇你值得收藏

3分钟快速搭建web服务器,这一篇你值得收藏

本文转转自微信公众号前端历劫之路原创https://mp.weixin.qq.com/s/4FBGrnM7XzQzitaCYIo2zw,如有侵权,请联系删除。

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Jacquelyn38 Jacquelyn38
3年前
基于Vue.js的Web视频播放器插件vue-vam-video@1.3.6 今日正式发布
前言今日正式发布一款基于Vue.js的Web视频播放器插件。可配置,操作灵活。跟我一起来体验吧!线上地址体验基于vue3.0和vuevamvideo,我开发了一款在线视频播放器。网址:https://www.maomin.club/site/videoplayer/源代码:https://github.com/maomincoding/videoplay
待兔 待兔
2星期前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Stella981 Stella981
2年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
6个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这