响应式HTML5视频播放器界面

Responsive HTML 5 video skin

视频，模板

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 4144
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

(function() {
    'use strict';

/**
     * Constructor
     */
    var Video = function($element) {

/**
         * Make the reference to the passed
         * in element globally accessible within
         * the Video constructor
         */
        this.$element = $element;

/**
         * Kick off the application
         */
        this.init();
    };

/* Alias prototype */
    var proto = Video.prototype;

/**
     * Top level function
     */
    proto.init = function() {

return this.setupHandlers()
            .createChildren()
            .enable();
    };

/**
     * Used to bind 'this' for functions
     */
    proto.setupHandlers = function() {
        this.onPlayPauseHandler = this.playPause.bind(this);
        this.onMuteHandler = this.mute.bind(this);
        this.onTimeUpdateHandler = this.progress.bind(this);
        this.onSeekHandler = this.seek.bind(this);
        this.onFullscreenHandler = this.fullscreenMode.bind(this);
        this.onVolumeHandler = this.adjustVolume.bind(this);

return this;
    };

/**
     * Create jQuery selectors here
     */
    proto.createChildren = function() {
        this.$video = this.$element.find('.js-media');
        this.$media = this.$video[0];
        this.$playBtn = this.$element.find('[data-playPause]');
        this.$muteBtn = this.$element.find('[data-mute]');
        this.$volume = this.$element.find('[data-volume]');
        this.$timeBar = this.$element.find('[data-time]');
        this.$bufferBar = this.$element.find('[data-buffer]');
        this.$progress = this.$element.find('[data-progress]');
        this.$currentTime = this.$element.find('[data-currentTime]');
        this.$duration = this.$element.find('[data-duration]');
        this.$fullscreen = this.$element.find('[data-fullscreen]');

return this;
    };

/**
     * Event listeners and functions that need
     * to run on initialization
     */
    proto.enable = function() {
        this.$playBtn.on('click', this.onPlayPauseHandler);
        this.$muteBtn.on('click', this.onMuteHandler);
        this.$video.on('timeupdate', this.onTimeUpdateHandler)
            .on('loadedmetadata', function() {
                this.updateTimeDisplay(0, this.$media.duration);
            }.bind(this))
            .on('ended', function() {
                this.$playBtn.removeClass('fa-play fa-pause')
                    .addClass('fa-undo');
                this.updateTime(100);
            }.bind(this));
        this.$progress.on('mousedown', this.onSeekHandler)
            .on('mouseup', this.onSeekHandler);
        this.$fullscreen.on('click', this.onFullscreenHandler);
        this.$volume.on('volumeChange', this.onVolumeHandler);

return this;
    };

/**
     * Get New Location
     *
     * Uses offsets within the tracking bar
     * to find the position in seconds that the
     * corresponds to in seconds of the video.
     *
     * Returns an object that has the new position
     * of the seek bar and the actual time time
     * seconds
     */
    proto.getNewLocation = function(e) {
        var seekBarOffset = this.$progress.offset().left;
        var mouseOffset = e.pageX;
        var mousePosInBar = mouseOffset - seekBarOffset;
        var seekBarWidth = this.$progress.width();
        var duration = this.$media.duration;
        var dist = Math.floor((mousePosInBar / seekBarWidth) * 100);
        var actualSeconds = (dist / 100) * duration;
        var newLocation = (actualSeconds / duration) * 100;

var info = {
            newTime: newLocation,
            actualTime: actualSeconds
        };;

return info;
    };

/**
     * Seek
     *
     * Called on mousedown and mouseup in the progress bar
     * to set the position of the progress bar and time in the
     * video.
     */
    proto.seek = function(e) {
        var info = this.getNewLocation(e);
        this.$media.currentTime = info.actualTime; // Set the time
        this.updateTime(info.newTime);
    };

/**
     * Play
     *
     * Plays or pauses the video
     */
    proto.playPause = function() {
        if (this.$media.paused) {
            this.$media.play();
        } else {
            this.$media.pause();
        }

this.playIconSwap();
    };

proto.playIconSwap = function() {
        if (!this.$media.paused) {
            this.$playBtn.removeClass('fa-play fa-undo')
                .addClass('fa-pause');
        } else {
            this.$playBtn.removeClass('fa-pause fa-undo')
                .addClass('fa-play');
        }
    };

/**
     * Mute
     *
     * Mutes the video
     */
    proto.mute = function() {
        if (this.$media.muted) {
            this.$media.muted = false;
        } else {
            this.$media.muted = true;
        }

this.muteIconSwap();
    };

proto.muteIconSwap = function() {
        if (this.$media.muted) {
            this.$muteBtn.removeClass('fa-volume-up')
                .addClass('fa-volume-off');
        } else {
            this.$muteBtn.removeClass('fa-volume-off')
                .addClass('fa-volume-up');
        }
    };

/**
     * Volume
     *
     * Volume of the video
     */
    proto.adjustVolume = function() {
        var toVolume = this.$volume.data('volume') / 100;
        this.$media.volume = toVolume; // from 0 - 1
        if (toVolume == 0) {
            this.$media.muted = true;
        } else {
            this.$media.muted = false;
        }
        this.muteIconSwap();
    }

/**
     * Progress
     *
     *
     */
    proto.progress = function() {
        var currentTime = Math.round(this.$media.currentTime);
        var duration = this.$media.duration;
        var locationPercent = (currentTime / duration) * 100;
        var buffered = this.$media.buffered.end(0);
        var bufferPercent = Math.floor((buffered / duration) * 100);

this.updateTime(locationPercent);
        this.updateBuffer(bufferPercent);
        this.updateTimeDisplay(Math.floor(this.$media.currentTime), duration);

};

/**
     * Update Buffer
     *
     * Updates the width of the buffer bar.
     */
    proto.updateBuffer = function(percent) {
        this.$bufferBar.css('width', percent + '%');
    };

/**
     * Update Time
     *
     * Updates the width of the seek bar.
     */
    proto.updateTime = function(percent) {
        this.$timeBar.css('width', percent + '%');
    };

proto.updateTimeDisplay = function(currentTime, duration) {
        this.$currentTime.text(formatTime(currentTime));
        this.$duration.text(formatTime(duration));
    }

function formatTime(s, m) {
        s = Math.floor(s);
        m = Math.floor(s / 60);
        m = m >= 10 ? m : '0' + m;
        s = Math.floor(s % 60);
        s = s >= 10 ? s : '0' + s;
        return m + ':' + s;
    }

/**
     * Full screen
     *
     * Display video in fullscreen mode
     */
    proto.fullscreenMode = function() {
        var elem = this.$media;
        if (elem.requestFullscreen) {
            elem.requestFullscreen();
        } else if (elem.mozRequestFullScreen) {
            elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) {
            elem.webkitRequestFullscreen();
        }
    }

// Initialize the Video instance
    return new Video($('.js-video'));
})();

// embedabled movies http://www.davestrailerpage.co.uk/

$('.volumeControl').slider({
    min: 0,
    max: 100,
    value: 100,
    slide: function(event, ui) {
        $(this).data('volume', ui.value).trigger('volumeChange');
    }
});

编译

CSS

@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
@import url(http://weloveiconfonts.com/api/?family=iconicfill);
[class*="iconicfill-"]:before {
    font-family: 'IconicFill', sans-serif;
}
/*********************
 * Background
 *********************/

html {
    background: #F4D17E url(/assets/landing.jpg) no-repeat center center fixed;
    background-size: cover;
    height: 100%;
}
body {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    line-height: 1.4;
    height: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}
/*********************
 * Wrapper
 *********************/

.js-video {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}
/*********************
 * Elements inside js-video
 *********************/

video {
    max-width: 100%;
    max-height: 70vh;
    background: url(http://www.davestrailerpage.co.uk/images/hungergamesmockingjay800.jpg) no-repeat;
    background-size: cover;
    background-position: center center;
}
.js-video button {
    -moz-appearance: none;
    -webkit-appearance: none;
}
/*********************
 * UI
 *********************/

.playPause.ui-icon {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 0;
    display: block;
    width: auto;
    bottom: 56px;
}
.playPause.ui-icon:before,
.playPause.ui-icon:after {
    position: absolute;
    top: 50%;
    left: 50%;
}
.playPause.ui-icon:after {
    content: '';
    width: 80px;
    height: 80px;
    margin: -40px 0 0 -40px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 10px;
}
.playPause.ui-icon:before {
    font-size: 40px;
    line-height: 80px;
    color: rgba(244, 209, 126, 0.5);
    z-index: 2;
    top: 50%;
    left: 50%;
    margin: -40px 0 0 -14px;
}
.playPause.ui-icon.fa-pause:before,
.playPause.ui-icon.fa-undo:before {
    margin-left: -17px;
}
.playPause.ui-icon.fa-pause {
    opacity: 0;
}
.ui {
    padding: 10px 1vw;
    font-size: 0;
    display: -webkit-flex;
    display: flex;
}
.ui > div:nth-of-type(1),
.ui > div:nth-of-type(4) {
    padding-top: 8px;
}
.ui > div:nth-of-type(1) {
    -webkit-flex: 30 30 1px;
    flex: 30 30 1px;
    margin-right: 10px;
}
.ui > div:nth-of-type(2) {
    -webkit-flex: 1 0 60px;
    flex: 1 0 60px;
    font-size: 12px;
    margin-right: 10px;
    text-align: center;
    line-height: 20px;
}
.ui > div:nth-of-type(3) {
    -webkit-flex: 0 0 20px;
    flex: 0 0 20px;
    margin-right: 10px;
}
.ui > div:nth-of-type(4) {
    -webkit-flex: 0 0 60px;
    flex: 0 0 60px;
}
.timeDisplay {
    white-space: nowrap;
}
.timeDisplay i {
    font-style: normal;
}
.fullscreen {
    position: absolute;
    font-style: normal;
    left: 20px;
    bottom: 66px;
    display: block;
    width: 40px;
    height: 40px;
    text-align: center;
    cursor: pointer;
    -moz-transition: color 0.3s;
    -o-transition: color 0.3s;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
}
.fullscreen:before {
    font-size: 30px;
    line-height: 40px;
    color: rgba(244, 209, 126, 0.2);
}
.fullscreen:hover:before {
    color: rgba(244, 209, 126, 0.5);
}
.ui-icon {
    font-size: 20px;
    vertical-align: middle;
    width: 20px;
    margin-right: 10px;
    cursor: pointer;
}
/*********************
 * Progress
 *********************/

.progress,
.volumeControl {
    background: rgba(0, 0, 0, 0.1);
    width: 100%;
    position: relative;
    height: 5px;
    cursor: pointer;
    overflow: hidden;
    border-radius: 2px;
    border: 0;
}
.progress > * {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}
.progress-time {
    background-color: black;
}
.anim {
    -moz-transition: width 1000ms linear;
    -o-transition: width 1000ms linear;
    -webkit-transition: width 1000ms linear;
    transition: width 1000ms linear;
}
.progress-buffer {
    background-color: rgba(0, 0, 0, 0.3);
    -moz-transition: width 250ms linear;
    -o-transition: width 250ms linear;
    -webkit-transition: width 250ms linear;
    transition: width 250ms linear;
}
.volumeControl {
    width: 90%;
    overflow: visible;
    position: relative;
    background: rgba(0, 0, 0, 0.3);
}
.volumeControl .ui-slider-handle {
    position: absolute;
    width: 9px;
    height: 9px;
    border: 0;
    top: -2px;
    background: transparent;
}
.volumeControl .ui-slider-handle:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: -50%;
    background: black;
    border-radius: 4px;
}
.volumeControl .ui-slider-handle:focus {
    outline: none;
}

HTML

<div class="wrapper">
    <div class="js-video">
        <video class="js-media" poster="/uploads/150101/transparent.png">
            <source src="/uploads/141201/among_the_stars.mp4" type="video/mp4" />
            <p>Your user agent does not support the HTML5 Video element.</p>
        </video>
        <i data-playPause class="playPause fa fa-play ui-icon"><span></span></i>
        <div class="ui">
            <div>
                <div data-progress class="progress">
                    <div data-buffer class="progress-buffer"></div>
                    <div data-time class="progress-time"></div>
                </div>
                
            </div>
            <div>
                <span class="timeDisplay"><i data-currentTime>0:00</i> / <i data-duration>0:00</i></span>
            </div>
            <div>
                <i data-mute class="fa fa-volume-up ui-icon"></i>
            </div>
            <div>
                <div data-volume="100" class="volumeControl"><span class="ui-slider-handle"></span>
                </div>
            </div>
        </div>
        
        <i data-fullscreen class="fullscreen iconicfill-fullscreen" title="fullscreen"></i>

</div>

</div>

Responsive HTML 5 video skin

视频，模板

编辑器支持Emmet

快捷键

Responsive HTML 5 video skin

视频，模板

视频背景磨砂玻璃效果的浮层登录/注册框

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：