Video 视频播放器

CKplayer

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

注意ckplayer的视频源只能使用绝对地址；而且不能放在jq的$(document).ready(function () {});中，否则会显示错误！

JS HTML CSS

<script type="text/javascript" src="https://src.axui.cn/v2.0/dist/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/v2.0/dist/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: '',
    };
    var player = new ckplayer(videoObject);
    </script>
</body>
</html>

                                <iframe allowfullscreen="true" autoplay="true" frameborder="0" height="400" src="examples/player/video.php?url=https://src.axui.cn/v2.0/public/media/video.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/v2.0/dist/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: '',
    };
    var player = new ckplayer(videoObject);
    </script>
</body>
</html>

                                <iframe allowfullscreen="true" autoplay="true" frameborder="0" height="400" src="examples/player/video.php?url=https://src.axui.cn/v2.0/public/media/video.mp4" width="100%"></iframe>

                        <style>
                            @media screen and (max-width: 500px) {
                                iframe{
                                    height: 260px!important;
                                }
                            }
                        </style>

VideoJS

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

JS HTML CSS

<script type="text/javascript" src="https://src.axui.cn/v2.0/dist/plugins/videojs/js/video.js"></script>
<script type="text/javascript" src="https://src.axui.cn/v2.0/dist/plugins/videojs/js/videojs-playlist.js"></script>
<script type="text/javascript" src="https://src.axui.cn/v2.0/dist/plugins/videojs/js/videojs-flash.js" ></script>
<script type="text/javascript" src="https://src.axui.cn/v2.0/dist/plugins/videojs/js/videojs-playlist-ui.js" ></script>
<script type="text/javascript" src="https://src.axui.cn/v2.0/dist/plugins/videojs/lang/zh-CN.js"></script>
<script type='text/javascript'>
        videojs.options.flash.swf = "https://src.axui.cn/v2.0/dist/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>

窗口播放视频

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

Dialog打开视频

JS HTML

<script type='text/javascript'>
            //axDialog打开视频
            let dialog = new axDialog({
                type: 'video',
                url: 'http://www.jq22.com/demo/johndyer-mediaelement-53ab0f8-150605001031/media/echo-hereweare.mp4',
                content: '中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。'
            });
            document.querySelector("#dialog").onclick = function(){
                dialog.show();
            }
            //axPopup打开视频
            new axPopup("#popup", {
                type: 'video',
                url: 'http://www.jq22.com/demo/johndyer-mediaelement-53ab0f8-150605001031/media/echo-hereweare.mp4',
                content: '中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。'
            });
</script>

                                            <a href="###" class="ax-btn ax-btn-primary" id="dialog">Dialog打开视频</a>
                                            <a href="###" class="ax-btn ax-btn-primary" id="popup">Popup打开视频</a>