位置: IT常识 - 正文

纯原生html编写的h5视频播放器(将原生html改成vue)

编辑:rootadmin
#snail-player-native 一个纯原生代码编写的h5视频播放器, 功能完善,基本满足使用,仅供学习,禁止商用 演示 演示加速 Install 1. git clone https://github.com/snail-boy/snail-player-native.git 2. 拷贝l ... snail-player-native一个纯原生代码编写的h5视频播放器, 功能完善,基本满足使用,仅供学习,禁止商用

推荐整理分享纯原生html编写的h5视频播放器(将原生html改成vue),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:html原型,html原生标签,html原生表格,html原型,将原生html改成vue,html原型,原生html开发,原生html组件,内容如对您有帮助,希望把文章链接给更多的朋友!

演示

纯原生html编写的h5视频播放器(将原生html改成vue)

演示加速

Install1. git clone https://github.com/snail-boy/snail-player-native.git2. 拷贝lib目录下的文件到自己项目里Usage

直接运行index.html

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #snailPlayId { width: 800px; height: 500px; margin: 0 auto; } h1 { text-align: center; } </style></head><body><h1>snail-player</h1><div id='snailPlayId'></div></body><script type="module"> import SnailPlayer from "./lib/index.js"; new SnailPlayer({ el: '#snailPlayId', src: 'https://webrabbit.oss-cn-beijing.aliyuncs.com/drawingbed/video.mp4', autoplay: true, // 是否自动播放 loop: true // 是否循环播放 })</script></html>Some Codemain.js// 计算进度条时间progressTime(offsetY) { return utils.formatSeconds((offsetY / this.progressw * this.playVideo.duration).toFixed(2))}// 进度条计算公式progressCalculate() { return (this.progressw / this.playVideo.duration * this.playVideo.currentTime).toFixed(2)}// 全屏fullScreenFun() { const docElm = document.documentElement if (!this.isFullScreen) { utils.addClass(this.el, 'fullscreen-active') utils.addClass(this.playVideo, 'fullscreen-active') utils.showClass('snail-player-full-screen-icon') utils.hiddenClass('snail-player-fullscreen-btn') utils.changeInnerText('fullscreen-icon', '退出全屏') utils.addClass(this.playBottom, 'sn-player-fullscreen-bottom-active') setTimeout(() => { if (docElm.requestFullscreen) { docElm.requestFullscreen(); } else if (docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); } else if (document.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); } }, 100) this.isFullScreen = true utils.hiddenClass('snail-player-web-fullscreen-box') } else { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } utils.showClass('snail-player-web-fullscreen-box') utils.removeClass(this.el, 'fullscreen-active') utils.removeClass(this.playVideo, 'fullscreen-active') utils.hiddenClass('snail-player-full-screen-icon') utils.showClass('snail-player-fullscreen-btn') utils.changeInnerText('fullscreen-icon', '进入全屏') utils.removeClass(this.playBottom, 'sn-player-fullscreen-bottom-active') this.isFullScreen = false }}index.js//加载cssrenderCss(url) { var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.type='text/css'; link.rel = 'stylesheet'; link.href = url; head.appendChild(link);}//加载faviconrenderIcon(url) { var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.type='type="image/x-icon"'; link.rel = 'shortcut icon'; link.href = url; head.appendChild(link);}Utilsclass Utils { hasClass(ele, cls) { return !!ele.className.match(new RegExp('(\s|^)' + cls + '(\s|$)')) } addClass(ele, cls) { if (!this.hasClass(ele, cls)) ele.className += ' ' + cls } removeClass(ele, cls) { if (this.hasClass(ele, cls)) { const reg = new RegExp('(\s|^)' + cls + '(\s|$)') ele.className = ele.className.replace(reg, '') } } set(key, value) { localStorage.setItem(key, value) } get(key) { return localStorage.getItem(key) } showClass(cls) { cls ? document.getElementsByClassName(cls)[0].style.display = 'block' : new Error('请输入类名') } hiddenClass(cls) { cls ? document.getElementsByClassName(cls)[0].style.display = 'none' : new Error('请输入类名') } changeInnerText(cls, text) { document.getElementsByClassName(cls)[0].innerHTML = text } clickfu(to, cls){ //回调函数,to为点击对象 to.setAttribute("class",cls); const siblings = to.parentNode.childNodes; for(let i=0; i<siblings.length; i++) if(siblings[i].nodeType == 1 && siblings[i] != to)siblings[i].className = ''; } formatSeconds(value) { if(!value) return '00:00' value = parseInt(value); let time; if (value > -1) { let hour = Math.floor(value / 3600); let min = Math.floor(value / 60) % 60; let sec = value % 60; let day = parseInt(hour / 24); if (day > 0) { hour = hour - 24 * day; time = day + "day " + hour + ":"; } else if (hour > 0) { time = hour + ":"; }else { time = ""; } if (min < 10) { time += "0"; } time += min + ":"; if (sec < 10) { time += "0"; } time += sec; } return time; } classEle(cls) { return cls && document.getElementsByClassName(cls)[0] }}export default UtilsFunction按空格键暂停播放点击屏幕暂停播放视频进度条拖拽,区分颜色鼠标移动到进度条上方显示时间视频快进慢放视频声音控制画中画整屏播放双击全屏播放等运行环境支持es6的各种浏览器最好用chrome源码地址,欢迎star

github地址

gitee地址

欢迎留言issues

Issues

本文链接地址:https://www.jiuchutong.com/zhishi/313363.html 转载请保留说明!

上一篇:织梦生成文章内容缩略图时自动加上绝对路径教程(织梦内容页模板修改)

下一篇:织梦DEDECMS关于提交表单“数据校验不对”的解决办法(织梦设置的关键词看不到)

  • 最新版抖音1-60级等级价格对照表(最新版抖音怎么关闭页面商城)

    最新版抖音1-60级等级价格对照表(最新版抖音怎么关闭页面商城)

  • iphone已停用连接itunes怎么解锁教程(iphone已停用连接iTunes什么意思)

    iphone已停用连接itunes怎么解锁教程(iphone已停用连接iTunes什么意思)

  • word打不开的解决办法(word打不开怎么回事?)

    word打不开的解决办法(word打不开怎么回事?)

  • 苹果11pro屏幕尺寸是(苹果11pro屏幕尺寸一样吗)

    苹果11pro屏幕尺寸是(苹果11pro屏幕尺寸一样吗)

  • 屏幕进水变色会自动恢复吗(屏幕进水屏幕变暗)

    屏幕进水变色会自动恢复吗(屏幕进水屏幕变暗)

  • 注销手机号需要什么(注销手机号需要准备什么)

    注销手机号需要什么(注销手机号需要准备什么)

  • 抖音怎么回复评论,又不@别人(抖音怎么回复评价的评论)

    抖音怎么回复评论,又不@别人(抖音怎么回复评价的评论)

  • 京东30天无忧体验是什么意思(京东30天无忧体验怎么用)

    京东30天无忧体验是什么意思(京东30天无忧体验怎么用)

  • abs和pbt键帽的区别(pbt和abs键帽区别)

    abs和pbt键帽的区别(pbt和abs键帽区别)

  • 微信注销如何跳过60天(微信注销如何跳转账号)

    微信注销如何跳过60天(微信注销如何跳转账号)

  • soul注销后界面是什么样(soul注销界面是什么样)

    soul注销后界面是什么样(soul注销界面是什么样)

  • 平板lte是什么网络制式(平板lte网络)

    平板lte是什么网络制式(平板lte网络)

  • 手机充电发热是什么原因(手机充电发热是不是电池坏了)

    手机充电发热是什么原因(手机充电发热是不是电池坏了)

  • 电脑电源线和电饭锅通用吗(电脑电源线和电饭锅电源线)

    电脑电源线和电饭锅通用吗(电脑电源线和电饭锅电源线)

  • 红米note8pro能插内存卡吗(红米note8pro能插内存卡不)

    红米note8pro能插内存卡吗(红米note8pro能插内存卡不)

  • 拼多多流量突然下降(拼多多流量突然暴涨,第二天猛下降)

    拼多多流量突然下降(拼多多流量突然暴涨,第二天猛下降)

  • 苹果5g手机上架时间(苹果5g手机什么时候上市苹果官网)

    苹果5g手机上架时间(苹果5g手机什么时候上市苹果官网)

  • 三星手机怎样录频(三星手机怎样录入门禁卡)

    三星手机怎样录频(三星手机怎样录入门禁卡)

  •  苹果6plus像素多少万(苹果6plus像素多少)

    苹果6plus像素多少万(苹果6plus像素多少)

  • 小米手环4怎么使用(小米手环4怎么充电)

    小米手环4怎么使用(小米手环4怎么充电)

  • 网线水晶头有几种规格(网线水晶头有几根线有用)

    网线水晶头有几种规格(网线水晶头有几根线有用)

  • 有了番号怎么用迅雷下载(有了番号怎么用微信登录)

    有了番号怎么用迅雷下载(有了番号怎么用微信登录)

  • 误删好友怎么恢复(误删好友怎么恢复火花天数)

    误删好友怎么恢复(误删好友怎么恢复火花天数)

  • Discuz!管理员无法登录后台时更新系统缓存的方法(discuz管理中心进不去)

    Discuz!管理员无法登录后台时更新系统缓存的方法(discuz管理中心进不去)

  • 企业所得税减免的会计分录
  • 网银转账与支票的区别
  • 综合所得减除费用标准
  • 发票怎么看开票最大额
  • 开票税金和实际交的税金差额怎么办
  • 企业注销其他应付款可以转入未分配利润吗
  • 个人转让土地使用权
  • 已出库未开票未收款会计分录
  • 合伙企业个人所得税怎么申报
  • 银行汇票退回
  • 公司收到转账支票怎么盖章
  • 固定资产清理营业外支出汇算清缴需要调增吗
  • 银行内部转账会计分录
  • 企业劳务发票怎么开,税率是多少
  • 税务系统出问题怎么办
  • 所有的固定资产都有残值率吗
  • 外地派人来出差怎么报备
  • 增值税的计征方法有哪些
  • 分公司是否可以与劳动者建立劳动关系
  • 同比增长率为负数怎么算
  • 所得税纳税调增调减怎么理解
  • 企业享受小型微利政策
  • 建筑完税怎么计算
  • 跟a签订合同可以撤销吗
  • 向股东借款会计科目
  • windows11 缩放
  • 绝地求生要什么电脑配置
  • 如何配置无线路由器参数
  • thinkphp autoload 命名空间自定义 namespace
  • 奥维尔的瓦兹河岸
  • win10开机强制进入安全模式重置
  • php入门例子
  • 保险储金是什么意思
  • 物流中的代收货款是什么意思
  • 资产负债表中其他综合收益怎么填
  • 公司收到社保局的提醒函怎么办
  • 认缴制下实收资本需要验资吗
  • 计算机领域划分
  • 固定资产毁损应该填制什么凭证
  • 投资收益的核算依据
  • 公司员工抽奖活动
  • wordpress部署到github
  • 建筑总承包分包单位可以是市政总承包吗
  • 坏账核销的会计处理
  • 开票机号填错了怎么办
  • 增值税普票税额可以抵扣税吗
  • 专职独立研发企业是指
  • 待抵扣进项税额和待认证进项税额的区别
  • 公司收到财政局奖励怎么记账
  • 预收账款的账务处理怎么对企业有利
  • 小规模纳税人进口货物增值税税率
  • 车辆违章处理有什么规定
  • 商业汇票和银行本票的区别
  • 电信收据模板
  • 企业自行进行的研究开发项目,在开发阶段如果
  • 收到委托加工物资发票
  • 残保金什么时候截止
  • 会计从业资格证取消了吗
  • win8.1鼠标没反应
  • windows更新过程中
  • pssvc.exe - pssvc是什么进程 有什么用
  • 微软被告
  • fpassist.exe是什么进程 有什么作用 fpassist进程查询
  • win10系统怎么安装qq
  • ksysslim.exe是什么
  • win8纯净版32位
  • win8无法打开ie
  • win8双系统怎么删除一个
  • javascript动画教程
  • 用css制作网页的步骤
  • 无缝广告植入
  • python中re.m
  • [置顶]津鱼.我爱你
  • node ffi
  • java教程 视
  • 延安市地方税务局电话
  • 电子税务局校验码
  • 税务询问笔录属于什么证据
  • 国税地税数据共多少
  • 小规模纳税人达到一般纳税人标准
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设