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%);

}

楼主：当当当

再在后面加一个控制条

           

00:00/ 00:00 全屏

.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 日在北京国际会议中心召开。上午主题峰会将由行业领军代表嘉宾带来精彩分享，下午峰会涵盖工具应用、游戏专场、数字营销等多个专场，欢迎感兴趣的小伙伴参与其中。

点击阅读原文，即可报名活动。