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

最新推荐文章于 2024-09-21 17:55:13 发布

CiBa-YAO

最新推荐文章于 2024-09-21 17:55:13 发布

阅读量5.8k

点赞数

分类专栏： html5 文章标签： html5 视频

本文链接：https://blog.csdn.net/yaozhiqi1905658804/article/details/70215386

版权

html5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一个项目用到了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>