html制作一个视频播放器,H5 打造属于自己的视频播放器(HTML 篇)
前言
众所周知,16 年无疑是直播行业的春天,同时也是 H5 的一次高潮。
so,到现在用 H5 技术在移动端做网页直播也是见怪不怪了,但是!!!今天我们的主角是 webApp 下播放视频。
参考文献:
1)HTML5+CSS3+JQuery 打造自定义视频播放器
2)mui Html5 Video 实现方案
3)移动端HTML5 video 视频播放优化实践
搬好凳子看 HTML
首先我们在 HB 下创建一个新的 app 项目,名称为「欠债」
新建一个 video.html
webkit-playsinline:在 ios 中,加入此属性,可以关闭自动全屏播放
object-fit:fill:视频充满 video 容器的大小
详细理由请看参考文献 2/3
在此我们向项目里放置一个 mp4 格式的视频,视频内容不限,可以是小动画,也可以是
ps:要在 meta 中加上,否则视频会扩充变形哦
OK,现在布局已经完成,一个视频已经在页面中了。
旁白:**,点了没反应,那这怎么播放?
楼主:你们这群家伙看别的小视频等个1小时都行。。。
旁白:一个简单的播放器,至少要有暂停/播放,进度条,视频时长,全屏等控件吧。
楼主:来来来,不要急,先来个播放按钮写在 video 标签后面。
设备不支持
写好样式
.bad-video {
position: relative;
overflow: hidden;
background-color: #CCCCCC;
}
.bad-video .vplay{
position: absolute;
width: 15%;
z-index: 99;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
楼主:当当当
再在后面加一个控制条
.bad-video .controls {
width: 100%;
height: 2rem;
line-height: 2rem;
font-size: 0.8rem;
color: white;
display: block;
position: absolute;
bottom: 0;
background-color: rgba(0, 0, 0, .55);
display: -webkit-flex;
display: flex;
}
.bad-video .controls>* {
flex: 1;
}
.bad-video .controls>*:nth-child(1) {
flex: 6;
}
.bad-video .controls>*:nth-child(2) {
flex: 2;
text-align: center;
}
.bad-video .controls .progressBar {
margin: .75rem 5%;
position: relative;
width: 90%;
height: .5rem;
background-color: rgba(200, 200, 200, .55);
border-radius: 10px;
}
.bad-video .controls .timeBar {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: rgba(99, 110, 225, .85);
border-radius: 10px;
}
总算有个看起来像样的了
旁白:楼主,可是还是不能播放啊
楼主:叫你别急,要不你先去撸一把,我写好了文字@你
旁白:好啊,早说嘛,我先走了,记得@我
楼主:你走,省的我精神分裂码两个人的字
好,现在 Html 元素已经基本上弄好啦,看起来不是那么 low 了。
ps:作者在社区有更新《H5 打造属于自己的视频播放器》系列文章之逻辑篇、JS篇1、JS篇2,欢迎感兴趣的小伙伴关注。
-EOF-
【活动推荐】由 HTML5梦工场主办,SegmentFault 特别支持的「2016 iWeb峰会北京站」将于 8 月 27 日在北京国际会议中心召开。上午主题峰会将由行业领军代表嘉宾带来精彩分享,下午峰会涵盖工具应用、游戏专场、数字营销等多个专场,欢迎感兴趣的小伙伴参与其中。
点击阅读原文,即可报名活动。
html制作一个视频播放器,H5 打造属于自己的视频播放器(HTML 篇)相关推荐
- H5打造属于自己的视频播放器(JS篇1)
回顾 1)H5打造属于自己的视频播放器(HTML篇) 2)H5打造属于自己的视频播放器(逻辑篇) 前言 在HTML篇当中我们写好了样式,今天我们为video新增一个样式 .bad-video vide ...
- 使用现有模板制作一个简单的H5页面
https://blog.csdn.net/yql_617540298/article/details/107677993这里介绍了很多制作H5页面的平台,这次,我打算动手尝试一下,我选择了" ...
- css响应式布局_用 CSS Grid 布局制作一个响应式柱状图
最新一段时间比较喜欢玩弄图表,出于好奇,我想找出比较好的用 CSS 制作图表的方案.开始学习网上开源图表库,它对我学习新的和不熟悉的前端技术很有帮助,比如这个:CSS Grid. 今天和大家分享我学到 ...
- 制作统一样式的H5视频播放器
前言 之前,忙于考试未来及更新文章.本文适用于掌握JavaScript html css jQuery的基本内容的读者.不知大家有没注意原生的H5视频播放器用不同的浏览器打开所呈现的效果并不一样.而如 ...
- 【简便的PyQt5】制作一个极具特色的视频播放器
[简便的PyQt5]制作一个极具特色的视频播放器 写在前面 效果展示 开源代码 loadInputVideo.py demo.py 写在前面 实现了以下功能 : ❤ PyQt5本地上传视频 ❤ ...
- 小强的HTML5移动开发之路(5)——制作一个漂亮的视频播放器
在前面几篇文章中介绍了HTML5的特点和需要掌握的基础知识,下面我们开始真正的体验一下HTML5的优势,我们开始制作一个漂亮的视频播放器吧先别急,在开始制作之前先了解一下视频文件的基本知识. 一.视频 ...
- python开发网页视频播放器_HTML5 VideoAPI,打造自己的Web视频播放器
本文将使用HTML5提供的VideoAPI做一个自定义的视频播放器,需要用到HTML5提供的video标签.以及HTML5提供的对JavascriptAPI的扩展. 一.基础知识 1.用法 注意:au ...
- html5直播api,HTML5 VideoAPI,打造自己的Web视频播放器
本文将使用HTML5提供的VideoAPI做一个自定义的视频播放器,需要用到HTML5提供的video标签.以及HTML5提供的对JavascriptAPI的扩展. 一.基础知识 1.用法 注意:au ...
- web前端入门到实战:HTML5 VideoAPI,打造自己的Web视频播放器
本文将使用HTML5提供的VideoAPI做一个自定义的视频播放器,需要用到HTML5提供的video标签.以及HTML5提供的对JavascriptAPI的扩展. 一.基础知识 1.用法 <v ...
- 使用AVPlayer制作一个播放器
代码地址如下: http://www.demodashi.com/demo/11685.html AVPlayer 是一个强大的视频播放器,可以播放多种格式的视频,缺点是没有控制界面,需要自己去实现. ...
最新文章
- 用Flash MX 2004自制调色版和配色组件(一)
- Problem G: 部分复制字符串
- activity 生命周期_从0系统学Android-2.4 Activity 的生命周期
- 小余学调度:调度指令票系列讲解1(持续更新中ing)
- [Conclusion]RabbitMQ-客户端源码之总结
- 数据采集标注、模型开发、部署落地,百度大脑全栈 AI 能力详解
- 输入输出练习 python
- Achain 钱包部署
- 市场调研报告-工业固体废物管理市场现状及未来发展趋势
- 应届生求职面试真的有那么难吗
- 使用fsck修复损坏磁盘
- [创业-29]:雪崩与狗,创业者真实写照
- 河南省软考报名时间成绩查询河南省教育考试院河南省人事考试网报名入口
- PDF文档如何在线进行解密操作
- IDEA 2019注册码(激活码)
- 电商项目—收货地址管理模块开发
- Eolink如何解决API测试痛点
- 如何快速学习STAR-CCM+软件解决工程实际问题
- kube-proxy 切换为ipvs模式
- Python实现json串比对并输出差异结果
热门文章
- Centos7__CA认证
- 【高数】【本科笔记】【第七章 微分方程】【7.2 可分离变量的微分方程】
- linux系统下的微信安装(ubuntu20.04)
- Deep learning-based method coupled with small sample learning for solving partial differential equat
- 库克说他在上大学时学会了编程,你呢?
- 网络工程师项目管理关键路径和松弛时间计算
- 从正则表达式到NFA(Thompson算法)
- 互联网中常见优化手段
- CodeForces - 863B Kayaking 暴力枚举
- Base64 编码的特征