H5打造属于自己的视频播放器（HTML篇）

Astrian 发布于2019-08-21 14:16 / 1254人阅读

前言

众所周知，16年无疑是直播行业的春天，同时也是H5的一次高潮。
so，到现在用H5技术在移动端做网页直播也是见怪不怪了，但是！！！
今天我们的主角是webApp下播放视频
参考文献：
1)HTML5+CSS3+JQuery打造自定义视频播放器
2)mui Html5 Video 实现方案
3)移动端HTML5

搬好凳子看HTML

首先我们在HB下创建一个新的app项目，名称为欠债

新建一个video.html

webkit-playsinline : 在ios中，加入此属性，可以关闭自动全屏播放
object-fit:fill : 视频充满video容器的大小
详细理由请看参考文献2or3

在此我们向项目里放置一个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了

H5打造属于自己的视频播放器（逻辑篇）
H5打造属于自己的视频播放器（JS篇1）
H5打造属于自己的视频播放器（JS篇2）

混合云专线服务 h5视频播放器 squid打造自己的cdn 打造自己的云服务器 h5视频播放花屏

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87843.html

H5打造属于自己的视频播放器（HTML篇）

前言众所周知，16年无疑是直播行业的春天，同时也是H5的一次高潮。so，到现在用H5技术在移动端做网页直播也是见怪不怪了，但是！！！今天我们的主角是webApp下播放视频参考文献：1)HTML5+CSS3+JQuery打造自定义视频播放器2)mui Html5 Video 实现方案3)移动端HTML5视频播放优化实践搬好凳子看HTML 首先我们在HB下创建一个新的app项目，名称为欠债 sh...

nevermind 2019-08-29 11:07 评论0 收藏0
H5打造属于自己的视频播放器（HTML篇）

前言众所周知，16年无疑是直播行业的春天，同时也是H5的一次高潮。so，到现在用H5技术在移动端做网页直播也是见怪不怪了，但是！！！今天我们的主角是webApp下播放视频参考文献：1)HTML5+CSS3+JQuery打造自定义视频播放器2)mui Html5 Video 实现方案3)移动端HTML5视频播放优化实践搬好凳子看HTML 首先我们在HB下创建一个新的app项目，名称为欠债 sh...

NervosNetwork 2019-08-01 15:35 评论0 收藏0
H5打造属于自己的视频播放器（逻辑篇）

摘要：回顾打造属于自己的视频播放器篇在上一章节之中，已经把篇给大致样式显现了出来，接下来应该是篇了，可是在写之前有必要先整理一下思绪，盲目乱写是不对的，喝杯茶，撩撩妹，生活多美妙，写起代码来自然心情好思路正。回顾 H5打造属于自己的视频播放器（HTML篇）在上一章节之中，已经把HTML篇给大致样式显现了出来，接下来应该是JS篇了，可是在写之前有必要先整理一下思绪，盲目乱写是不对的，喝杯茶，...

hover_lew 2019-08-20 10:17 评论0 收藏0
H5打造属于自己的视频播放器（逻辑篇）

摘要：回顾打造属于自己的视频播放器篇在上一章节之中，已经把篇给大致样式显现了出来，接下来应该是篇了，可是在写之前有必要先整理一下思绪，盲目乱写是不对的，喝杯茶，撩撩妹，生活多美妙，写起代码来自然心情好思路正。回顾 H5打造属于自己的视频播放器（HTML篇）在上一章节之中，已经把HTML篇给大致样式显现了出来，接下来应该是JS篇了，可是在写之前有必要先整理一下思绪，盲目乱写是不对的，喝杯茶，...

Big_fat_cat 2019-08-01 15:34 评论0 收藏0