v1.0核心
v1.0实例
v2.0

Video 视频播放器

CKplayer PLUGIN

CKplayer是一款优秀的国产播放器，可以播放绝大多数格式的视频，支持htm5和flash两种视频播放形式；支持在视频播放前/中/后插入广告。目前使用的版本是X1，更新到2019-10-22。详细使用说明见：官网

注意ckplayer的视频源只能使用绝对地址；而且不能放在jq的$(document).ready(function () {});中，否则会显示错误！
JS HTML CSS 
  • <script type="text/javascript" src="https://src.axui.cn/v1.0/src/plugins/ckplayer/ckplayer.js"></script>
<script type='text/javascript'>
    var videoObject = {
        container: '#video',
        variable: 'player',
        advertisements:'website:examples/player/ad.json',
        video: 'http://www.jq22.com/demo/johndyer-mediaelement-53ab0f8-150605001031/media/echo-hereweare.mp4',
    };
    var ckplayer = new ckplayer(videoObject);
</script>
                        
  •                                 <div id="video" style="width: 100%; height: 400px;"></div>
                                    
  •                         <style>
                            @media screen and (max-width: 500px) {
                                #video{
                                    height: 260px!important;
                                }
                            }
                        </style>

使用iframe播放视频就不存在多个视频id冲突问题，多个视频推荐使用iframe形式播放。

PHP HTML CSS 
  • <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>视频播放</title>
    <style>
        body,html{
            margin:0;
            padding:0;
        }
        @media screen and (max-width: 500px) {
            #video{
                height:260px!important;
            }
        }
    </style>
</head>
<body>
<script type="text/javascript" src="/https://src.axui.cn/v1.0/src/plugins/ckplayer/ckplayer.js"></script>
<div id="video" style="width: 100%; height: 400px;"></div>
<script type="text/javascript">
    var videoObject = {
        container: '#video',
        variable: 'player',
        advertisements:'website:/examples/player/ad.json',
        video: '<?php echo $_GET['url'];?>',
    };
    var player = new ckplayer(videoObject);
    </script>
</body>
</html>
                        
  •                                 <iframe allowfullscreen="true" autoplay="true" frameborder="0" height="400" src="<?=$urldemo?>player/video.php?url=http://www.jq22.com/demo/johndyer-mediaelement-53ab0f8-150605001031/media/echo-hereweare.mp4" width="100%"></iframe>
                                    
  •                         <style>
                            @media screen and (max-width: 500px) {
                                iframe{
                                    height: 260px!important;
                                }
                            }
                        </style>

简单加密基本思路是：对视频地址进行代码混淆，通过video-encrypt.php页面进行解密。

PHP HTML CSS 
  • <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>视频播放</title>
    <style>
        body,html{
            margin:0;
            padding:0;
        }
        @media screen and (max-width: 500px) {
            #video{
                height:260px!important;
            }
        }
    </style>
</head>
<body>
<script type="text/javascript" src="/https://src.axui.cn/v1.0/src/plugins/ckplayer/ckplayer.js"></script>
<div id="video" style="width: 100%; height: 400px;"></div>
<script type="text/javascript">
    var videoObject = {
        container: '#video',
        variable: 'player',
        advertisements:'website:/examples/player/ad.json',
        video: '<?php echo str_replace("mpv","mp4",$_GET['url']);?>',
    };
    var player = new ckplayer(videoObject);
    </script>
</body>
</html>
                        
  •                                 <iframe allowfullscreen="true" autoplay="true" frameborder="0" height="400" src="<?=$urldemo?>player/video-encrypt.php?url=http://www.jq22.com/demo/johndyer-mediaelement-53ab0f8-150605001031/media/echo-hereweare.mpv" width="100%"></iframe>
                                    
  •                         <style>
                            @media screen and (max-width: 500px) {
                                iframe{
                                    height: 260px!important;
                                }
                            }
                        </style>

VideoJS PLUGIN

VideoJS是一款很受欢迎的视频插件，作者在Github上频繁更新，功能越来越强大。既支持单独视频播放也支持视频列表播放；重要的是作者开发了诸多扩展插件;本框架使用的版本是v7.8.1。详细使用说明见：官网，或Github

JS HTML CSS 
  • <script type="text/javascript" src="https://src.axui.cn/v1.0/src/plugins/videojs/js/video.js"></script>
<script type="text/javascript" src="https://src.axui.cn/v1.0/src/plugins/videojs/js/videojs-playlist.js"></script>
<script type="text/javascript" src="https://src.axui.cn/v1.0/src/plugins/videojs/js/videojs-flash.js" ></script>
<script type="text/javascript" src="https://src.axui.cn/v1.0/src/plugins/videojs/js/videojs-playlist-ui.js" ></script>
<script type="text/javascript" src="https://src.axui.cn/v1.0/src/plugins/videojs/lang/zh-CN.js"></script>
<script type='text/javascript'>
    $(document).ready(function () {
        videojs.options.flash.swf = "https://src.axui.cn/v1.0/src/plugins/videojs/js/video-js.swf";
        var videojs01 = videojs('videojs01');
    });
</script>
                        
  •                                 <div class="ax-videojs">
                                    <video id="videojs01" class="video-js" controls preload="auto" height="400">
                                        <source src="http://www.jq22.com/demo/johndyer-mediaelement-53ab0f8-150605001031/media/echo-hereweare.mp4" type="video/mp4" />
                                    </video>
                                </div>
                                    
  •                         <style>
                            @media screen and (max-width: 500px) {
                                #videojs01{
                                    height: 260px!important;
                                }
                            }
                        </style>

窗口播放视频

借助弹窗插件播放视频，本实例一是借助fancybox图集插件播放视频，更多使用方法点击这里 ；本实例二是借助sweetalert2弹窗插件播放视频，更多使用方法点击这里。

fancybox窗口打开视频 sweetalert2窗口打开视频
JS HTML 
  • <link href="https://src.axui.cn/v1.0/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" >
<script type="text/javascript" src="https://src.axui.cn/v1.0/src/plugins/sweetalert2/js/sweetalert2.js" type="text/javascript"></script>
<link href="https://src.axui.cn/v1.0/src/plugins/fancybox/css/jquery.fancybox.css?v=1.1" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://src.axui.cn/v1.0/src/plugins/fancybox/js/jquery.fancybox.min.js"></script>
<script type='text/javascript'>
    $(document).ready(function () {
        $("#samedia").click(function () {
            Swal.fire({
                videoUrl: 'http://www.jq22.com/demo/johndyer-mediaelement-53ab0f8-150605001031/media/echo-hereweare.mp4',
                videoWidth: '100%',
                videoHeight: 'auto',
                videoControls: 'true',
                videoAutoplay: 'false',
                titleText: '经典动画',
                text: '关注我们查看更多经典动画。',
                closePosition:"out",
            });
        });
    });
</script>
                        
  •                                 <a data-fancybox="h5video" data-width="640" data-height="360" href="http://www.jq22.com/demo/johndyer-mediaelement-53ab0f8-150605001031/media/echo-hereweare.mp4" data-options='{"buttons": ["download","close"]}' class="ax-btn ax-btn-primary">fancybox窗口打开视频</a>
                                <a href="###" class="ax-btn ax-btn-primary" id="samedia">sweetalert2窗口打开视频</a>