video 音频视频改变样式

其他 2018-08-28 21:57:58 阅读次数: 0 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>hivideo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="assets/hivideo.css" />
    <style type="text/css">
        .main-wrap{
            margin: 0 auto;
            min-width: 320px;
            max-width: 640px;
        }

        .main-wrap video{
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="main-wrap">
        <video ishivideo="true" autoplay="false" isrotate="false" autoHide="true">
            <source src="http://www.html5videoplayer.net/videos/madagascar3.mp4" type="video/mp4">
        </video>
    </div>
     <script type="text/javascript" src="hivideo.js"></script>
</body>
</html>
/* 全局样式 */
.none{
    display: none;
}

.hi-video-wrapper{
    color: #fff;
    background: rgba(0, 0, 0, 0.75);
    position: relative;
}

.hi-video-wrapper *{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

video[ishivideo="true"]::-webkit-media-controls{
    display:none !important;
}

video[ishivideo="true"]::-moz-media-controls{
    display:none !important;
}

video[ishivideo="true"]::-o-media-controls{
    display:none !important;
}

video[ishivideo="true"]::media-controls{
    display:none !important;
}

.hi-video{
    width: 100%;
    height: 100%;
}

.hi-video-playIcon{
    position: absolute;
    z-index: 10000;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    
    width: 100px;
    height: 100px;
    background: url("images/play-big.png") no-repeat;
    background-size: 100px 100px;
    cursor: pointer;
}

.hi-video-playIcon.onBtn{
    display: block;
 }

.hi-video-playIcon.offBtn{
    display: none;
}

.hi-video-controlbar{
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    min-height: 40px;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 10000;
    padding: 10px 0;
}

.hi-video-controlbar button{
    border: none;
    margin: 0;
    padding: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
    vertical-align: middle;
}

.hi-video-controlbar input:active, .hi-video-controlbar input:hover, .hi-video-controlbar input:focus
.hi-video-controlbar button:active, .hi-video-controlbar button:hover, .hi-video-controlbar button:focus{
    border: none;
    outline: none;
}

.hi-video-controlbar .video-play{
    width: 5%;
    min-width: 5px;
    text-align: center;
    cursor: pointer;
    vertical-align: middle;
}

.hi-video-controlbar .video-play .onBtn{
    background: url("./images/play.png") no-repeat;
}

.hi-video-controlbar .video-play .offBtn{
    background: url("./images/pause.png") no-repeat;
}

.hi-video-controlbar .progressbar{
    display: block;
    width: 100%;
    text-align: center;
}

.hi-video-controlbar .progressbar::-moz-progress-bar, .bufferbar::-moz-progress-bar {
    background: #c0392b;
}
.hi-video-controlbar .progressbar::-webkit-progress-bar, .bufferbar::-webkit-progress-bar {
    background: rgba(255, 255, 255, 0.1);
}
.hi-video-controlbar .progressbar::-webkit-progress-value, .bufferbar::-webkit-progress-value {
    background: #c0392b;
}

.hi-video-controlbar .video-slider{
    width: 50%;
    min-width: 10px;
    position: relative;
    z-index: 0;
    display: inline-block;
}

.hi-video-controlbar .seekbar {
    z-index: 3;
    position: relative;
    width: 100%;
    background-color: transparent !important;
}

.hi-video-controlbar .video-slider .progressbar{
    position: absolute;
    left: 0;
    top: 11px;
    width: 100%;
    pointer-events: none;
    height: 1px;
    z-index: 2;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #c0392b;
}

.hi-video-controlbar input[type=range]{
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;
    vertical-align: middle;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: rgba(255, 255, 255, 0.7);
    height: 1px;
    border: none;
    cursor: pointer;
}

.hi-video-controlbar input[type=range]::-moz-range-track {
    vertical-align: middle;
    border-radius: 2px;
    background-color: rgba(255, 255, 255, 0.7);
    -moz-appearance: none;
    background-color: white;
    height: 1px;
    cursor: pointer;
}

.hi-video-controlbar input[type=range]::-moz-range-thumb {
    border-radius: 50%;
    height: 8px;
    width: 8px;
    background-color: white;
    border: 0;
}

.hi-video-controlbar input[type=range].light::-moz-range-thumb {
    box-shadow: 0 0 8px 2px white;
}

.hi-video-controlbar input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border-radius: 50%;
    height: 8px;
    width: 8px;
    background-color: white;
    border: 0;
}

.hi-video-controlbar input[type=range].light::-webkit-slider-thumb {
    box-shadow: 0 0 8px 2px white;
}

.custom-video-controlbar input[type=range]:active::-moz-range-track {
    background: orange;
}

.hi-video-controlbar .video-time{
    width: 20%;
    min-width: 65px;
    font-size: 10px;
    color: #e0dfdf;
    text-align: left;
    padding-left: 5px;
    line-height: 20px;
}

.hi-video-controlbar .volumebar{
    display: inline-block;
    width: 96%;
}

.hi-video-controlbar .video-mute{
    width: 5%;
    min-width: 5px;
    text-align: center;
    cursor: pointer;
}

.hi-video-controlbar .video-mute .onBtn{
    background: url("./images/volume.png");
}

.hi-video-controlbar .video-mute .offBtn{
    background: url("./images/mute.png") no-repeat;
}

.hi-video-controlbar .video-volume{
    width: 15%;
    min-width: 10px;
    overflow: hidden;
}

.hi-video-controlbar .video-fullscreen{
    width: 5%;
    min-width: 5px;
    text-align: center;
    cursor: pointer;
}

.hi-video-controlbar .video-fullscreen .onBtn{
    background: url("./images/fullscreen.png") no-repeat;
}

.hi-video-controlbar .video-fullscreen .offBtn{
    background: url("./images/fullscreen_off.png") no-repeat;
}

.rotate90{
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.hi-video-wrapper .float{
    float: left;
}

上面是样式

/**
 * 视频库：hivideo
 * hivideo-options包含属性:
 * autoplay 自动播放, isrotate 全屏是否横屏播放,autoHide 播放时是否隐藏控制条
 * @author heavi, 2016.08.04
 */

(function(global, factory){
    "use strict";

    if(typeof module === "object" && typeof module.exports === "object"){
        module.exports =  factory(global);
    }else{
        factory(global);
    }
}(typeof window !== "undefined" ? window : this, function(window){
    var hivideo = function(ele){
        return new hivideo.prototype.init(ele);
    };

    /**
     * 视频构造函数
     * @type {{init: hivideo.init}}
     */
    hivideo.prototype = {
        constructor: hivideo,
        /**
         * 视频构造函数
         * @param ele
         */
        init: function(ele){
            this.volume_ = 0
            this.videoId_ = "hivideo" + new Date().getTime();
            //播放器容器
            var videoWrapper = document.createElement("div");
            videoWrapper.setAttribute("class", "hi-video-wrapper");
            videoWrapper.setAttribute("hivideoId", this.videoId_);
            ele.setAttribute("hivideoId", "hivideo");
            var oldVideoParentEle = ele.parentNode;
            oldVideoParentEle.removeChild(ele);
            videoWrapper.appendChild(ele);
            if(!hivideo.hasClass(ele, "hi-video")){
                hivideo.addClass(ele, "hi-video");
            }
            oldVideoParentEle.appendChild(videoWrapper);

            var videoBar = document.createElement("div");
            videoBar.setAttribute("hivideoId", "videoBar");
            videoBar.setAttribute("class", "hi-video-controlbar");
            videoBar.innerHTML = '<div class="video-play float"> \
            <button hivideoId="playBtn" class="onBtn"></button> \
            </div> \
            <div class="video-slider float"> \
            <progress hivideoId="progressbar" class="progressbar" value="0" max="100" ></progress> \
            <input type="range" hivideoId="seekbar" value="0" class="seekbar"> \
            </div> \
            <div class="video-time float">\
            <span class="video-time-current">00:00</span><span>/</span><span class="video-time-total">00:00</span>\
            </div>\
            <div class="video-mute float"> \
            <button hivideoId="muteBtn" class="onBtn"></button> \
            </div> \
            <div class="video-volume float"> \
            <input type="range" hivideoId="volumebar" class="volumebar" value="10" min="0" max="100" step="0.1"> \
            </div> \
            <div class="video-fullscreen float"> \
            <button hivideoId="fullBtn" class="onBtn"></button> \
            </div>';
            videoWrapper.appendChild(videoBar);
            var videoCenterPlayer = document.createElement("div");
            videoCenterPlayer.setAttribute("hivideoid", "centerPlayIcon");
            videoCenterPlayer.setAttribute("class", "hi-video-playIcon");
            videoWrapper.appendChild(videoCenterPlayer);

            this.videoParent = videoWrapper;
            this.video = ele;
            this.videoBar = hivideo.querySelector('div[hivideoId="videoBar"]', videoWrapper);
            this.videoPlayIcon = videoCenterPlayer;
            this.playBtn = hivideo.querySelector('button[hivideoId="playBtn"]', videoWrapper);
            this.fullBtn = hivideo.querySelector('button[hivideoId="fullBtn"]', videoWrapper);
            this.muteBtn = hivideo.querySelector('button[hivideoId="muteBtn"]', videoWrapper);
            this.seekbar = hivideo.querySelector('input[hivideoId="seekbar"]', videoWrapper);
            this.curTimeSpan = hivideo.querySelector(".video-time-current", videoWrapper);
            this.totalTimeSpan = hivideo.querySelector(".video-time-total", videoWrapper);
            this.volumebar = hivideo.querySelector('input[hivideoId="volumebar"]', videoWrapper);

            this.bindFullEvent().bindPlayEvent().bindMuteEvent().bindTimeChangeEvent().bindAutoHideControlsEvent();
            this.config();

            return this;
        },
        config: function(){
            var self = this;
            self.options = self.options || {};
            var boolConvert = function(value){
                return value && value.toLowerCase() == "true";
            };

            [{"autoplay": boolConvert}, {"isrotate": boolConvert}, {"autoHide": boolConvert}].forEach(function(propObj){
                for(var prop in propObj){
                    if(self.video.hasAttribute(prop)){
                        self.options[prop] = propObj[prop](self.video.getAttribute(prop));
                    }
                }
            });
            if(self.options.autoplay){
                self.playBtn.click();
            }
        }
    }

    /**
     * 对象扩展函数
     * @param obj
     */
    hivideo.extend = hivideo.prototype.extend = function(obj){
        var self = this;
        for(var prop in obj){
            if(obj.hasOwnProperty(prop) && !self.hasOwnProperty(prop)){
                self[prop] = obj[prop];
            }
        }
    }

    hivideo.extend({
        /**
         * 获取class
         * @param elem
         * @returns {*|string|string}
         */
        getClass: function( elem ) {
            return elem.getAttribute && elem.getAttribute( "class" ) || "";
        },
        /**
         * 添加class
         * @param ele
         * @param value
         */
        addClass: function(ele, value){
            if(value){
                var curValue = hivideo.getClass(ele);
                if(curValue.indexOf(value) === -1){
                    curValue = curValue + " " + value;
                }
                ele.setAttribute("class", curValue.trim());
            }
        },
        /**
         * 删除class
         * @param ele
         */
        removeClass: function(ele, value){
            if(value){
                var curValue = hivideo.getClass(ele);
                if(curValue.indexOf(value) > -1){
                    curValue = (" " +  curValue + " ").replace(" " + value + " ", " ");
                }
                ele.setAttribute("class", curValue.trim());
            }
        },
        /**
         * 元素是否存在值为@{value}的class
         * @param ele
         * @param value
         * @returns {boolean}
         */
        hasClass: function(ele, value){
            var has = false;

            if(value){
                var curValue = hivideo.getClass(ele);
                if(curValue.indexOf(value) > -1){
                    has = true;
                }
            }

            return has;
        },
        /**
         * querySelectorAll工厂，以备兼容性修改
         * @returns {NodeList}
         */
        querySelectorAll: function(selector){
            return document.querySelectorAll(selector);
        },
        /**
         * querySelector工厂，以备兼容性修改
         * @param selector
         * @param parentEle
         * @returns {Element}
         */
        querySelector: function(selector, parentEle){
            return parentEle ? parentEle.querySelector(selector): document.querySelector(selector);
        },
        /**
         * 获取time格式字符串
         * @param second
         */
        getTimeBySecond: function(second){
            var hour = parseInt(second / (60* 60));
            var minute = parseInt((second/60) % 60);
            var second = parseInt(second % 60);
            return (hour > 0 ?((hour < 10 ? "0" + hour:hour) + ":") : "") + (minute < 10 ? "0" + minute:minute) + ":" + (second < 10 ? "0" + second:second);
        }
    });

    hivideo.prototype.init.prototype = hivideo.prototype;
    /**
     * 绑定全屏事件
     * @returns {hivideo}
     */
    hivideo.prototype.bindFullEvent = function(){
        var self = this;
        var origWidth = origHeight = 0;

        ["fullscreenchange", "webkitfullscreenchange", "mozfullscreenchange", "MSFullscreenChange"].forEach(function(eventType){
            var curFullhivideoId = null;
            document.addEventListener(eventType, function(event){
                if((curFullhivideoId = document.body.getAttribute("curfullHivideo")) && curFullhivideoId !== self.videoId_ ){
                    return;
                }
                var isRotate = self.options.isrotate;
                if(self.isFullScreen()){
                    var cltHeight = isRotate ? window.screen.width : window.screen.height;
                    var cltWidth = isRotate ? window.screen.height : window.screen.width;
                    if(isRotate && !hivideo.hasClass(self.videoParent, "rotate90")){
                        hivideo.addClass(self.videoParent, "rotate90");
                    }
                    self.videoParent.style.height = cltHeight + "px";
                    self.videoParent.style.width = cltWidth + "px";
                }else{
                    if(isRotate) self.videoParent.className = self.videoParent.className.replace("rotate90", "").trim();
                    self.videoParent.style.height = origHeight + "px";
                    self.videoParent.style.width = origWidth + "px";
                }
            })
        });

        self.fullBtn && self.fullBtn.addEventListener("click", function(){
            if(!self.isFullScreen()){
                document.body.setAttribute("curfullHivideo", self.videoId_);
                origWidth = self.videoParent.offsetWidth;
                origHeight = self.videoParent.offsetHeight;
                // go full-screen
                if (self.videoParent.requestFullscreen) {
                    self.videoParent.requestFullscreen();
                } else if (self.videoParent.webkitRequestFullscreen) {
                    self.videoParent.webkitRequestFullscreen();
                } else if (self.videoParent.mozRequestFullScreen) {
                    self.videoParent.mozRequestFullScreen();
                } else if (self.videoParent.msRequestFullscreen) {
                    self.videoParent.msRequestFullscreen();
                }
                self.exchangeBtnStatus(this, false);
            }else{
                // exit full-screen
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }

                self.exchangeBtnStatus(this, true);
            }
        });

        return self;
    };
    /**
     * 绑定播放事件
     * @returns {hivideo}
     */
    hivideo.prototype.bindPlayEvent = function(){
        var self = this;
        [self.playBtn, self.videoPlayIcon].forEach(function(ele){
            ele.addEventListener("click", function(event){
                event = event || window.event;

                if(!self.video) return;
                if(self.video.paused){
                    self.video.play();
                    self.videoPlayIcon && self.exchangeBtnStatus(self.videoPlayIcon, false);
                    self.playBtn && self.exchangeBtnStatus(self.playBtn, false);
                }else{
                    self.video.pause();
                    self.videoPlayIcon && self.exchangeBtnStatus(self.videoPlayIcon, true);
                    self.playBtn && self.exchangeBtnStatus(self.playBtn, true);
                }
            });
        });

        return self;
    };
    /**
     * 绑定播放控制面板隐藏事件
     */
    hivideo.prototype.bindAutoHideControlsEvent = function(){
        var self = this;

        var showOrHideControls = function(isShow){
            isShow ? hivideo.removeClass(self.videoBar, "none") : hivideo.addClass(self.videoBar, "none");
        };

        var ticker = function(){
            //autoHide为true并且正在播放视频
            if(self.options.autoHide && !self.video.paused){
                showOrHideControls(false);
            }
        };
        var timerId = setTimeout(ticker, 10000);

        ["mousemove"].forEach(function(type){
            self.videoParent.addEventListener(type, function(event){
                if(timerId){
                    clearInterval(timerId);
                }
                showOrHideControls(true);
                timerId = setTimeout(ticker, 10000);
            });
        });


        return self;
    };
    /**
     * 绑定音量控制事件
     * @returns {hivideo}
     */
    hivideo.prototype.bindMuteEvent = function(){
        var self = this;
        self.muteBtn && self.muteBtn.addEventListener("click", function(){
            if(self.video.muted){
                self.video.muted = false;
                self.volumebar.value = self.volume_;

                self.exchangeBtnStatus(this, true);
            }else{
                self.video.muted = true;
                self.volumebar.value = 0;
                self.exchangeBtnStatus(this, false);
            }
        });

        return self;
    }
    /**
     * 绑定时间变化事件
     * @returns {hivideo}
     */
    hivideo.prototype.bindTimeChangeEvent = function(){
        var self = this;
        //拖动时间进度
        self.seekbar && self.seekbar.addEventListener("change", function(){
            var time = self.video.duration * (this.value / 100);
            self.video.currentTime = time;
        });
        //video事件更新
        self.video && self.video.addEventListener("timeupdate", function(){
            var val = (100 / self.video.duration) * self.video.currentTime;
            self.seekbar.value = val;
            //更新当前时间

            self.curTimeSpan.innerText = hivideo.getTimeBySecond(self.video.currentTime);
        });
//媒体数据加载完成
        self.video && self.video.addEventListener("loadedmetadata", function(){
            self.totalTimeSpan.innerText = hivideo.getTimeBySecond(self.video.duration);
        });
        //播放结束
        self.video && self.video.addEventListener("ended", function(){
            self.video.pause();
            self.video.currentTime = 0;
            self.exchangeBtnStatus(self.playBtn, true);
        });
        //声音控制
        self.volume_ = self.volumebar.value;
        self.video.volume = self.volumebar.value / 100;
        self.volumebar && self.volumebar.addEventListener("change", function(){
            self.video.volume = this.value / 100;
            self.volume_ = this.value;
            if(this.value == 0){
                self.video.muted = true;
                self.exchangeBtnStatus(self.muteBtn, false);
            }else {
                self.video.muted = false;
                self.exchangeBtnStatus(self.muteBtn, true);
            }
        });

        return self;
    }
    /**
     * 判断是否正在全屏播放
     * @returns {*}
     */
    hivideo.prototype.isFullScreen = function(){
        return document.fullscreenElement ||
            document.webkitFullscreenElement ||
            document.mozFullScreenElement ||
            document.msFullscreenElement;
    };
    /**
     * 更改按钮状态
     * @param ele
     * @param isOn
     */
    hivideo.prototype.exchangeBtnStatus = function(ele, isOn){
        if(!ele) return;
        var onClass = "onBtn", offClass = "offBtn";
        if(isOn){
            hivideo.removeClass(ele, offClass);
            hivideo.addClass(ele, onClass);
        }else{
            hivideo.removeClass(ele, onClass);
            hivideo.addClass(ele, offClass);
        }
    };
    /**
     * 在DOMContentLoaded事件中初始化hivideo
     */
    (function(){
        /**
         * 加载hivideo视频播放器
         */
        var loadVideo = function(){
            var videoList =  hivideo.querySelectorAll('video[ishivideo="true"]');
            for(var i = 0; i < videoList.length; i++){
                hivideo(videoList[i]);
            }
        };
        document.addEventListener( "DOMContentLoaded", function(){
            loadVideo();
            document.removeEventListener("DOMContentLoaded", arguments.callee);
        } );
    })();

    //添加hividoe全局变量
    window.hivideo  = window.hivideo || hivideo;

    return hivideo;
}));

hivideo.js

猜你喜欢

转载自blog.csdn.net/lianxin19900610/article/details/81540943
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
周排行
购置笔记本常识
从源码看Spring Security之采坑笔记（Spring Boot篇）
大数据学习——高可用配置案例
如何避免选择不专业的建站公司?
Euclid's Game HDU - 1525（博弈）
面试笔记（六）---Js实现eventHandler
Windows 实例搭建的 FTP 在外网无法连接和访问
设计模式 : 桥接模式
USB 设备驱动开发之几个重要结构体分析
14-p14_sqrt求平方根
每日归档
更多
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022