1. 首页
  2. 前端之路

更换播放器为video.js，支持MP4和M3U8，逻辑仅为参考

857 阅读 0 评论 

<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="renderer" content="webkit">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
<title>My DPlayer</title>
<style type="text/css">body,html,.dplayer{padding:0;margin:0;width:100%;height:100%;color:#aaa;background-color:#000}a{text-decoration:none}#dplayer,#poster{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9;overflow:hidden;object-fit:cover;object-position:center center}#poster{z-index:998;background-color:#000}#poster .play-btn,.play-icon{position:absolute;width:54px;height:54px;left:50%;top:50%;z-index:980;margin-left:-27px;margin-top:-27px}#poster .play-btn img,.play-icon img{width:54px;height:54px;z-index:990}.play-icon{display:none}</style>
</head>
<body>
{if !empty($purl)}
<!--<div id="dplayer"  style="position:relative; z-index:0"></div>-->
<script src="{RESIMG}/themes/dplayer/jquery.min.js"></script>
<!--<script type="text/javascript">-->
<!-- $('#dplayer').html('<iframe width="100%" height="100%" allowTransparency="true" frameborder="0" allowfullscreen="true"  scrolling="no" src="{$purl}" id=aaaa></iframe>');-->
<!--</script> -->
{else if !empty($isokm3)}

<link href="https://cdn.bootcss.com/video.js/7.20.3/alt/video-js-cdn.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/video.js/7.20.3/video.js"></script>
<script src="https://cdn.bootcss.com/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>

<style>
    .video-js{ /* 给.video-js设置字体大小以统一各浏览器样式表现，因为video.js采用的是em单位 */
        font-size: 14px;
    }
    .video-js button{
        outline: none;
    }
    .video-js.vjs-fluid,
    .video-js.vjs-16-9,
    .video-js.vjs-4-3{ /* 视频占满容器高度 */
        height: 100%;
        background-color: #161616;
    }
    .vjs-poster{
        background-color: #161616;
    }
    .video-js .vjs-big-play-button{ /* 中间大的播放按钮 */
        font-size: 2.5em;
        line-height: 2.3em;
        height: 2.5em;
        width: 2.5em;
        -webkit-border-radius: 2.5em;
        -moz-border-radius: 2.5em;
        border-radius: 2.5em;
        background-color: rgba(115,133,159,.5);
        border-width: 0.12em;
        margin-top: -1.25em;
        margin-left: -1.75em;
    }
    .video-js.vjs-paused .vjs-big-play-button{ /* 视频暂停时显示播放按钮 */
        display: block;
    }
    .video-js.vjs-error .vjs-big-play-button{ /* 视频加载出错时隐藏播放按钮 */
        display: none;
    }
    .vjs-loading-spinner { /* 加载圆圈 */
        font-size: 2.5em;
        width: 2em;
        height: 2em;
        border-radius: 1em;
        margin-top: -1em;
        margin-left: -1.5em;
    }
    .video-js .vjs-control-bar{ /* 控制条默认显示 */
        display: flex;
    }
    .video-js .vjs-time-control{display:block;}
    .video-js .vjs-remaining-time{display: none;}

    .vjs-button > .vjs-icon-placeholder:before{ /* 控制条所有图标，图标字体大小最好使用px单位，如果使用em，各浏览器表现可能会不大一样 */
        font-size: 22px;
        line-height: 1.9;
    }
    .video-js .vjs-playback-rate .vjs-playback-rate-value{
        line-height: 2.4;
        font-size: 18px;
    }
    /* 进度条背景色 */
    .video-js .vjs-play-progress{
        color: #ffb845;
        background-color: #ffb845;
    }
    .video-js .vjs-progress-control .vjs-mouse-display{
        background-color: #ffb845;
    }
    .vjs-mouse-display .vjs-time-tooltip{
        padding-bottom: 6px;
        background-color: #ffb845;
    }
    .video-js .vjs-play-progress .vjs-time-tooltip{
        display: none!important;
    }
</style>
<!--<div id="dplayer"></div>-->

<video id="myVideo" class="video-js vjs-big-play-centered vjs-fluid" controls preload="auto" data-setup='{}'>
    <source src="{$curr}" type="application/x-mpegURL">
</video>

<script>

    var videoID ="{$pmd5}";
    var vt =parseInt("{$vt}");
    var ft =parseInt("{$ft}");
    var gt =parseInt("{$gt}");
    var qt =parseInt("{$qt}");

    var cookie = {
        set: function(name, value) {
            var Days = 1;
            var exp = new Date();
            exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
            document.cookie = name + '=' + escape(value) + ';expires=' + exp.toGMTString();
        },
        get: function(name) {
            var arr, reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)');
            if(arr = document.cookie.match(reg)) {
                return unescape(arr[2]);
            } else {
                return null;
            }
        },
        del: function(name) {
            var exp = new Date();
            exp.setTime(exp.getTime() - 1);
            var cval = getCookie(name);
            if(cval != null) {
                document.cookie = name + '=' + cval + ';expires=' + exp.toGMTString();
            }
        }
    };
    var cookieTime = cookie.get('time_' + videoID);
    //console.log(cookieTime);
    if(!cookieTime || cookieTime == undefined) {
        cookieTime = 0;
    }


    var player = videojs(document.getElementById('myVideo'), {
        controls: true, // 是否显示控制条
        poster: '{RESIMG}/themes/dplayer/loading_wap.jpg', // 视频封面图地址
        preload: 'auto',
        autoplay: false,
        fluid: true, // 自适应宽高
        language: 'zh-CN', // 设置语言
        muted: false, // 是否静音
        inactivityTimeout: false,
        controlBar: { // 设置控制条组件
            /* 设置控制条里面组件的相关属性及显示与否
            'currentTimeDisplay':true,
            'timeDivider':true,
            'durationDisplay':true,
            'remainingTimeDisplay':false,
            volumePanel: {
              inline: false,
            }
            */
            /* 使用children的形式可以控制每一个控件的位置，以及显示与否 */
            children: [
                {name: 'playToggle'}, // 播放按钮
                {name: 'currentTimeDisplay'}, // 当前已播放时间
                {name: 'progressControl'}, // 播放进度条
                {name: 'durationDisplay'}, // 总时间
                { // 倍数播放
                    name: 'playbackRateMenuButton',
                    'playbackRates': [0.5, 1, 1.5, 2, 2.5]
                },
                {
                    name: 'volumePanel', // 音量控制
                    inline: false, // 不使用水平方式
                },
                {name: 'FullscreenToggle'} // 全屏
            ]
        },




    }, function (){
        console.log('视频可以播放了',this);
    });
    player.play();
    var changeVideo = function (vdoSrc) {
        if (/\.m3u8$/.test(vdoSrc)) { //判断视频源是否是m3u8的格式
            player.src({
                src: vdoSrc,
                type: 'application/x-mpegURL' //在重新添加视频源的时候需要给新的type的值
            })
        } else {
            player.src(vdoSrc)
        }
        player.load();
        player.play();
    }
    var src = "{$curr}";
    changeVideo(src);

    // 设置允许播放的时间（单位：秒）
    var allowedTime = 5; // 3分钟

    // 监听播放时间变化的事件，看几分钟后跳转到收费页面
    player.on('timeupdate', function() {
        // var currentTime = player.currentTime();
        // // 如果播放时间超过允许的时间，暂停播放
        // if (currentTime >= allowedTime) {
        //     player.pause();
        //     top.location.href = window.parent.nextlink;
        // }
        cookie.set('time_' + videoID, player.currentTime());
        if(vt>0){
            if(player.currentTime()>vt){
                window.parent.showVip();
            }
        }else if(ft>0){
            if(player.currentTime()>ft){
                window.parent.showFt();
            }
        }else if(qt>0){
            if(player.currentTime()>qt){
                window.parent.showQt();
            }
        }else if(gt>0){
            if(player.currentTime()>gt){
                window.parent.showGt();
            }
        }
    });

    // var ua = window.navigator.userAgent.toLowerCase();
    // if(ua.match(/MicroMessenger/i) == 'micromessenger'){
    // }else{
    //
    //     player.on('ended', function (){
    //         if(window.parent.nextsid!=''){
    //             top.location.href = window.parent.nextlink;
    //         }
    //     });
    // }



</script>
{else} 
<style type="text/css">body,html,div{background-color:#000;padding: 0;margin: 0;width:100%;height:100%;color:#aaa;}</style>
<div id="dplayer"  style="position:relative; z-index:0"></div>
<video
        id="my-player"
        class="video-js"
        controls
        preload="auto"
        width="640"
        height="264"
        poster="http://vjs.zencdn.net/v/oceans.png"
        data-setup="{}"
>
    <source src="{$curr}" type="video/mp4" />
    <p class="vjs-no-js">
        如果想使用video.js，请确保浏览器可以运行JavaScript，并且支持
        <a href="https://videojs.com/html5-video-support/" target="_blank"
        >HTML5 video</a>
    </p>
</video>
<!--<script src="{RESIMG}/themes/dplayer/jquery.min.js"></script>-->
<!--   <script type="text/javascript">-->
<!--</script>-->
{/if}</body></html>


点赞(0)
IDE Eval Resetter：JetBrains 全家桶无限试用插件
IDE Eval Resetter：JetBrains 全家桶无限试用插件
批量组装sql语句
批量组装sql语句
源目录图片找出来复制到目标服务器上，并且层级目录一致
源目录图片找出来复制到目标服务器上，并且层级目录一致
压缩图片
压缩图片

评论列表 共有 0 条评论

暂无评论
立即
投稿
发表
评论 返回
顶部
{__SCRIPT__}