html5视频播放器一（改写默认样式）

来源：互联网发布：历年粮食进出口数据编辑：程序博客网时间：2024/05/18 15:04

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

先看看效果
这里写图片描述

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

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>CoolPlay</title>        <link rel="stylesheet" href="css/cool.css" />    </head>    <body>        <!--            时间：2016-08-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="http://7xqovd.com1.z0.glb.clouddn.com/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>

源码地址：https://github.com/YaoZhiQi/coolPlay

0 0

html5视频播放器 一 （改写默认样式）

html5视频播放器一（改写默认样式）