Video 视频播放器

CKplayer PLUGIN

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

注意ckplayer的视频源只能使用绝对地址;而且不能放在jq的$(document).ready(function () {});中,否则会显示错误!
  • <script type="text/javascript" src="https://src.axui.cn/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形式播放。

  • <!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/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页面进行解密。

  • <!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/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

  • <script type="text/javascript" src="https://src.axui.cn/src/plugins/videojs/js/video.js"></script>
    <script type="text/javascript" src="https://src.axui.cn/src/plugins/videojs/js/videojs-playlist.js"></script>
    <script type="text/javascript" src="https://src.axui.cn/src/plugins/videojs/js/videojs-flash.js" ></script>
    <script type="text/javascript" src="https://src.axui.cn/src/plugins/videojs/js/videojs-playlist-ui.js" ></script>
    <script type="text/javascript" src="https://src.axui.cn/src/plugins/videojs/lang/zh-CN.js"></script>
    <script type='text/javascript'>
        $(document).ready(function () {
            videojs.options.flash.swf = "https://src.axui.cn/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弹窗插件播放视频,更多使用方法点击这里

  • <link href="https://src.axui.cn/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" >
    <script type="text/javascript" src="https://src.axui.cn/src/plugins/sweetalert2/js/sweetalert2.js" type="text/javascript"></script>
    <link href="https://src.axui.cn/src/plugins/fancybox/css/jquery.fancybox.css?v=1.1" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="https://src.axui.cn/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>