h5视频播放器

作者: HaleyLiu | 来源:发表于2017-12-17 00:44 被阅读248次

Vue2-接入H5直播点播播放器(flv\mp4)
原生播放器与微信同层播放器差异
H5与原生交互的坑
H5 内嵌视频播放问题
H5视频全屏播放
h5视频播放器
纯原生编写的h5视频播放器
01.视频播放器框架介绍
webView h5 video标签设置不全屏播放
H5视频播放器失去焦点，即离开页面就自动暂停播放

一.首先先看一下目录
css框架用的是bootstrap，js库用的是jquery

目录.png

bootstrap
----|css
-------|bootstrap.css
----|fonts
-------|glyphicons-halflings-regular.eot
-------|glyphicons-halflings-regular.svg
-------|glyphicons-halflings-regular.ttf
-------|glyphicons-halflings-regular.woff
-------|glyphicons-halflings-regular.woff2
css
----|reset.css
----|willesPlay.css
images
----|control_01.png
----|playheader.jpg
js
----|jquery-1.11.3.min.js
----|willesPlay.js

二.先看一下index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<title>超炫酷的HTML5视频播放器DEMO演示</title>
<!--引用背景的css样式reset.css-->
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<!--引用bootstrap框架(css)-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<!--引用播放器的样式willesPlay.css-->
<link rel="stylesheet" type="text/css" href="css/willesPlay.css"/>
<!--引用jquery框架-->
<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<!--引用视频的播放的js-->
<script src="js/willesPlay.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div id="willesPlay">
    <div class="playHeader">
        <div class="videoName">艾欧尼亚之血色月光</div>
    </div>
    <div class="playContent">
        <div class="turnoff">
            <ul>
                <li><a href="javascript:;" title="喜欢" class="glyphicon glyphicon-heart-empty"></a></li>
                <li><a href="javascript:;" title="关灯" class="btnLight on glyphicon glyphicon-sunglasses"></a></li>
                <li><a href="javascript:;" title="分享" class="glyphicon glyphicon-share"></a></li>
            </ul>
        </div>
        <video width="100%" height="100%" id="playVideo">
            <source src="0001.mp4" type="video/mp4"></source>
            当前浏览器不支持 video直接播放，点击这里下载视频： <a href="/">下载视频</a>
        </video>
        <div class="playTip glyphicon glyphicon-play"></div>
    </div>
    <div class="playControll">
        <div class="playPause playIcon"></div>
        <div class="timebar">
            <span class="currentTime">0:00:00</span>
            <div class="progress">
                <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
                </div>
            <span class="duration">0:00:00</span>
        </div>
        <div class="otherControl">
            <span class="volume glyphicon glyphicon-volume-down"></span>
            <span class="fullScreen glyphicon glyphicon-fullscreen"></span>
            <div class="volumeBar">
                    <div class="volumewrap">
                        <div class="progress">
                        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 8px;height: 40%;"></div>
                    </div>
                        </div>
                </div>
        </div>
    </div>
</div>
            
        </div>
    </div>
</div>

<div style="text-align:center;clear:both;">
    <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
    <script src="/follow.js" type="text/javascript"></script>
</div>
</body>
</html>

三.再看一下播放器的js

$(function() {
    var playVideo = $('video');
    var playPause = $('.playPause'); //播放和暂停
    var currentTime = $('.timebar .currentTime'); //当前时间
    var duration = $('.timebar .duration'); //总时间
    var progress = $('.timebar .progress-bar'); //进度条
    var volumebar = $('.volumeBar .volumewrap').find('.progress-bar');
    playVideo[0].volume = 0.4; //初始化音量
    playPause.on('click', function() {
        playControl();
    });
    $('.playContent').on('click', function() {
        playControl();
    }).hover(function() {
        $('.turnoff').stop().animate({
            'right': 0
        }, 500);
    }, function() {
        $('.turnoff').stop().animate({
            'right': -40
        }, 500);
    });
    $(document).click(function() {
        $('.volumeBar').hide();
    });
    playVideo.on('loadedmetadata', function() {
        duration.text(formatSeconds(playVideo[0].duration));
    });

    playVideo.on('timeupdate', function() {
        currentTime.text(formatSeconds(playVideo[0].currentTime));
        progress.css('width', 100 * playVideo[0].currentTime / playVideo[0].duration + '%');
    });
    playVideo.on('ended', function() {
        $('.playTip').removeClass('glyphicon-pause').addClass('glyphicon-play').fadeIn();
        playPause.toggleClass('playIcon');
    });
    
    $(window).keyup(function(event){
        event = event || window.event;
            if(event.keyCode == 32)playControl();
            if(event.keyCode == 27){
            $('.fullScreen').removeClass('cancleScreen');
            $('#willesPlay .playControll').css({
                'bottom': -48
            }).removeClass('fullControll');
            };
        event.preventDefault();
    });
    
    
    //全屏
    $('.fullScreen').on('click', function() {
        if ($(this).hasClass('cancleScreen')) {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.mozExitFullScreen) {
                document.mozExitFullScreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            }
            $(this).removeClass('cancleScreen');
            $('#willesPlay .playControll').css({
                'bottom': -48
            }).removeClass('fullControll');
        } else {
            if (playVideo[0].requestFullscreen) {
                playVideo[0].requestFullscreen();
            } else if (playVideo[0].mozRequestFullScreen) {
                playVideo[0].mozRequestFullScreen();
            } else if (playVideo[0].webkitRequestFullscreen) {
                playVideo[0].webkitRequestFullscreen();
            } else if (playVideo[0].msRequestFullscreen) {
                playVideo[0].msRequestFullscreen();
            }
            $(this).addClass('cancleScreen');
            $('#willesPlay .playControll').css({
                'left': 0,
                'bottom': 0
            }).addClass('fullControll');
        }
        return false;
    });
    //音量
    $('.volume').on('click', function(e) {
        e = e || window.event;
        $('.volumeBar').toggle();
        e.stopPropagation();
    });
    $('.volumeBar').on('click mousewheel DOMMouseScroll', function(e) {
        e = e || window.event;
        volumeControl(e);
        e.stopPropagation();
        return false;
    });
    $('.timebar .progress').mousedown(function(e) {
        e = e || window.event;
        updatebar(e.pageX);
    });
    //$('.playContent').on('mousewheel DOMMouseScroll',function(e){
    //  volumeControl(e);
    //});
    var updatebar = function(x) {
        var maxduration = playVideo[0].duration; //Video 
        var positions = x - progress.offset().left; //Click pos
        var percentage = 100 * positions / $('.timebar .progress').width();
        //Check within range
        if (percentage > 100) {
            percentage = 100;
        }
        if (percentage < 0) {
            percentage = 0;
        }

        //Update progress bar and video currenttime
        progress.css('width', percentage + '%');
        playVideo[0].currentTime = maxduration * percentage / 100;
    };
    //音量控制
    function volumeControl(e) {
        e = e || window.event;
        var eventype = e.type;
        var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));
        var positions = 0;
        var percentage = 0;
        if (eventype == "click") {
            positions = volumebar.offset().top - e.pageY;
            percentage = 100 * (positions + volumebar.height()) / $('.volumeBar .volumewrap').height();
        } else if (eventype == "mousewheel" || eventype == "DOMMouseScroll") {
            percentage = 100 * (volumebar.height() + delta) / $('.volumeBar .volumewrap').height();
        }
        if (percentage < 0) {
            percentage = 0;
            $('.otherControl .volume').attr('class', 'volume glyphicon glyphicon-volume-off');
        }
        if (percentage > 50) {
            $('.otherControl .volume').attr('class', 'volume glyphicon glyphicon-volume-up');
        }
        if (percentage > 0 && percentage <= 50) {
            $('.otherControl .volume').attr('class', 'volume glyphicon glyphicon-volume-down');
        }
        if (percentage >= 100) {
            percentage = 100;
        }
        $('.volumewrap .progress-bar').css('height', percentage + '%');
        playVideo[0].volume = percentage / 100;
        e.stopPropagation();
        e.preventDefault();
    }

    function playControl() {
            playPause.toggleClass('playIcon');
            if (playVideo[0].paused) {
                playVideo[0].play();
                $('.playTip').removeClass('glyphicon-play').addClass('glyphicon-pause').fadeOut();
            } else {
                playVideo[0].pause();
                $('.playTip').removeClass('glyphicon-pause').addClass('glyphicon-play').fadeIn();
            }
        }
        //关灯
    $('.btnLight').click(function(e) {
        e = e || window.event;
        if ($(this).hasClass('on')) {
            $(this).removeClass('on');
            $('body').append('<div class="overlay"></div>');
            $('.overlay').css({
                'position': 'absolute',
                'width': 100 + '%',
                'height': $(document).height(),
                'background': '#000',
                'opacity': 1,
                'top': 0,
                'left': 0,
                'z-index': 999
            });
            $('.playContent').css({
                'z-index': 1000
            });
            $('.playControll').css({
                'bottom': -48,
                'z-index': 1000
            });

            $('.playContent').hover(function() {
                $('.playControll').stop().animate({
                    'height': 48,
                },500);
            }, function() {
                setTimeout(function() {
                    $('.playControll').stop().animate({
                        'height': 0,
                    }, 500);
                }, 2000)
            });
        } else {
            $(this).addClass('on');
            $('.overlay').remove();
            $('.playControll').css({
                'bottom': 0,
            });
        }
        e.stopPropagation();
        e.preventDefault();
    });
});

//秒转时间
function formatSeconds(value) {
    value = parseInt(value);
    var time;
    if (value > -1) {
        hour = Math.floor(value / 3600);
        min = Math.floor(value / 60) % 60;
        sec = value % 60;
        day = parseInt(hour / 24);
        if (day > 0) {
            hour = hour - 24 * day;
            time = day + "day " + hour + ":";
        } else time = hour + ":";
        if (min < 10) {
            time += "0";
        }
        time += min + ":";
        if (sec < 10) {
            time += "0";
        }
        time += sec;
    }
    return time;
}

最终效果就是：

阿卡丽和易大师对决1.png

阿卡丽和易大师对决2.png

源码地址：https://github.com/Feiyu123/H5Video.git

Vue2-接入H5直播点播播放器(flv\mp4)
简单介绍两个可以在H5上播放视频流的播放器一、LivePlayer H5直播|点播播放器 H5直播/点播播放器，...
原生播放器与微信同层播放器差异
原生播放器原生播放器顾名思义，就是手机自带的。因为原生播放器的层级是最高，所以当播放视频时会把整个页面挡住。H5 ...
H5与原生交互的坑
视频播放 1.使用H5进行视频播放且自动使用系统播放器，在全屏变为小屏，并返回上个界面的时候，出现视频声音没有关闭...
H5 内嵌视频播放问题
今天做了一个微信活动的H5，要求是滑动页面触发视频播放，视频播放完后隐藏视频，显示落地页，另外要求，禁用系统播放器...
H5视频全屏播放
解决移动端视频默认播放器的问题，通过这个插件可以做出移动端视频全屏播放的h5。可以在github上获取demo以...
h5视频播放器
一.首先先看一下目录css框架用的是bootstrap，js库用的是jquery bootstrap----|cs...
纯原生编写的h5视频播放器
snail-player-native 一个纯原生代码编写的h5视频播放器, 功能完善，基本满足使用，仅供学习，禁...
01.视频播放器框架介绍
视频播放器介绍文档目录介绍 01.该视频播放器介绍 02.视频播放器功能 03.视频播放器架构说明 04.视频播...
webView h5 video标签设置不全屏播放
最近有个需求在h5页面中加载视频，并在网页内自动播放。但是实际呢视频不会在网页直接播放，而是弹出视频播放器全屏播放...
H5视频播放器失去焦点，即离开页面就自动暂停播放
H5视频播放器失去焦点，即离开页面就自动暂停播放如果视频是video元素，可以写个定时器，每秒钟设置一下播放状态 ...