一个项目用到了html5视频播放器，于是就写了一个，走了很多坑，例如在chrome中加载视频出现加载异常等

先看看效果

是不是感觉换不错，以下是我播放器改写样式的布局。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>CoolPlay</title>

        <link rel="stylesheet" href="css/cool.css" />

    </head>

    <body>

        <!--

            作者：627314658@qq.com

            时间：2017-01-01

            描述：H5播放器开发

        -->

        <!--播放器区域  开始-->

        <div class="" style="width:600px;height: 400px;margin: 50px auto;">

            <div id="cool-play" class="cool-play">

                <div class="cool-title">

                    <span>哈佛大学演讲</span>

                </div>

                <div class="cool-video">

                    <video id="video" class="video">

                        <source src="file/test.mp4" type="video/mp4" ></source>

                        您的浏览器不支持 HTML5 video 标签。

                    </video>

                    <span class="icon-c-loading"></span>

                </div>

                <div id="c-box" class="cool-module">

                    <div class="">

                        <a id="c-progress" class="cool-progress">

                            <span id="c-played" class="cool-played"></span>

                            <span type="range" id="c-drag" class="cool-drag"></span>

                        </a>

                    </div>

                    <div class="cool-btn">

                        <div class="cool-btn-left btn">

                            <a id="c-previous" class="icon-c-previous"></a>

                            <a id="c-play" class="icon-c-play" onclick="playPause()"></a>

                            <a id="c-next" class="icon-c-next"> </a>

                        </div>

                        <div class="cool-btn-center">

                            <span id="c-currentTime">00:00</span>

                            <span>/</span>

                            <span id="c-totalTime">00:00</span>

                        </div>

                        <div class="cool-btn-right btn">

                            <a class="icon-c-refresh"></a>

                            <a class="voice">

                                <span class="i-voice icon-c-voice"></span>

                                <span class="c-voice">

                                    <span class="c-voice-triangle"></span>

                                    <span class="voice-bar">

                                        <span class="voice-bared">

                                            <span class="voice-dot"></span>

                                        </span>

                                    </span>

                                    <span class="voice-mask"></span>

                                </span>

                            </a>

                            <a id="cool-fullScreen" class="icon-c-enlarge"></a>

                        </div>

                    </div>

                </div>

            </div>

        </div>

        <script src="js/cool.js" type="text/javascript" charset="utf-8" async defer></script>

    </body>

</html>

html5视频播放器 一 （改写默认样式）的更多相关文章

  1. 打造自己的html5视频播放器

    前段时间重新学习了一下html5的video部分,以前只是停留在标签的使用上,这一次决定深入了解相关的API,并运用这些API打造一个简单的视频播放器.所谓“打造自己的”,就是要自己重写video标签 ...

  2. html5视频播放器 二 （功能实现及播放优化）

    样式改写css,其中的一些按钮是在“阿里妈妈”上找的字体图标,就不向上传了. /* *CoolPlay视频播放器 * 2016年8月1日 * 627314658@qq.com * */ @font-f ...

  3. jqm视频播放器,html5视频播放器,html5音乐播放器,html5媒体播放器,video开展demo,html5视频播放演示示例,html5移动视频播放器

    最近看到很多有用的论坛html5视频播放的发展,音乐播放功能,大多数都在寻找答案.所以,我在这里做一个demo.对于大家互相学习.html5开发越来越流行,至于这也是一个不可缺少的一部分的视频. 如何 ...

  4. Html5视频播放器-VideoJS+Audio标签实现视频，音频及字幕同步播放

    一,VideoJS介绍 引用脚本,videojs很为你着想,直接cdn了,你都不需要下载这些代码放入自己的网站 <link href=”http://vjs.zencdn.net/c/video ...

  5. 一个html5视频播放器

    具有播放视频,拖拽,自定义右键菜单,上传头像的功能 <!DOCTYPE html><html lang="en"> <head> <met ...

  6. video.js html5 视频播放器

    我个人感觉很不错 https://github.com/videojs/video.js <head> <title>Video.js | HTML5 Video Player ...

  7. 很震撼的HTML5视频播放器，电影院的感觉

    效果很震撼!有电影院的感觉了.呵呵. 看了下代码,依然是 在一个canvas里嵌入<video>然后getImageData 点击这里查看效果 代码: var canvas = docum ...

  8. html5视频播放器

    <!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. video.js分段自动加载视频【html5视频播放器】

    突发奇想的需求,要在官网上放一个一个半小时的视频教程…… 然而,加载成了问题,页面是cshtml的.net混合网站,不知道哪儿的限制,导致视频加不出来. 没有办法,只能前端想办法了. 于是将视频切割成 ...

随机推荐

  1. call和apply和bind的区别

    在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. JavaScript 的一大 ...

  2. Sublime Text 2/3 输入法修复[Ubuntu(Debian)]

    一直想找一个可以替代sublime的IDE主要还是hi因为没有好的方法解决中文输入的问题, 今天在网上找到一个非常不错的方法,亲自实验是可行的,就记录下来了,我的系统是ubuntu16.04 Subl ...

  3. adobe开发软件激活

    稳定支持至2017版本系列的adobe开发软件破解激活 本内容属原创,转载请注明出处!   以激活AE CC2017为例演示: 第一步打开软件第二步在产品列表中选择你所安装的产品(注意区分 32 位和 ...

  4. classpath 路径和classpath*的区别

    classpath和classpath*区别:  classpath:只会到你的class路径中查找找文件. classpath*:不仅包含class路径,还包括jar文件中(class路径)进行查找 ...

  5. 20181017 work - Inno Setup 禅道 xp系统 楷体字体 win10倒计时 nwjs chosen

    win10 闹钟和时钟 用个倒计时 Inno Setup 编译器 把应用程序打包成安装程序 nwjs-v0.14.7-win-ia32 XP专用 chrome用的49的版本 作用是把浏览器地址的程序打 ...

  6. CAD参数绘制椭圆弧（com接口）

    在CAD设计时,需要绘制椭圆弧,用户可以设置椭圆弧基本属性. 主要用到函数说明: _DMxDrawX::DrawEllipseArc 绘制椭圆弧.详细说明如下: 参数 说明 DOUBLE dCente ...

  7. element-UI el-table表格根据搜索条件表格值改变颜色

    Part.1 关键代码 var s = "天气"; // 需要匹配的字符 var reg = new RegExp("(" + s + ")" ...

  8. java线程学习2

    sleep  变为阻塞态  但不释放锁  休眠指定毫秒时间 yield  变为就绪态  可能立即被执行  也可能不立即被执行 join   插队  暂停当前执行的线程  让调用join的线程先执行 线 ...

  9. Server.MapPath() 用法

    Server.MapPath() ./当前目录/网站主目录../上层目录~/网站虚拟目录 如果当前的网站目录为E:\wwwroot   应用程序虚拟目录为E:\wwwroot\company 浏览的页 ...

  10. EZOJ 宝石迷阵 建图+网络流匹配

    题面: 封印恶魔的地方可以看作是一个 n*m 的矩形,包含了 n*m 个祭坛,并且其 中有一些祭坛已经损坏了. 如果 i+j 为偶数,那么第 i 行第 j 列的祭坛只要没有损坏,就一定会封印有一个恶魔 ...