videojs+layui

项目地址

GitHub预览地址：https://lightbc.github.io/videojs/
GitHub下载地址：https://github.com/lightbc/videojs.git

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>index</title>
        <link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            #url {
                width: 500px;
                height: 38px;
                display: inline-block;
            }

            button {
                margin-left: -4px;
                width: 100px;
            }
        </style>
    </head>
    <body>
        <input type="text" name="url" id="url" class="layui-input" value="http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4" />
        <button type="button" class="layui-btn" onclick="play()">Play</button>
    </body>
</html>
<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var width = document.body.clientWidth;
    var height = document.body.clientHeight;
    $("body").css({
        "width": width,
        "height": height,
        "text-align": "center",
        "line-height": height
    })

    var num = 0;

    function play() {
        var input = $("#url").val();
        var regex = /^(http|https).*\.mp4$/
        if (regex.test(input)) {
            location.href = "play.html?input=" + input
        } else {
            if (num < 2) {
                alert("请检查网址是否正确！");
            } else {
                alert("输入格式：(http|https)://xxxxxxxx.mp4");
            }
        }
        num++;
    }
</script>

play.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>play</title>
        <link rel="stylesheet" type="text/css" href="css/video-js.min.css">
        <script src="js/video.min.js"></script>
        <script src="js/jquery-3.4.1.js"></script>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            #example-video{
                position: absolute;
                top: 50%;
                left: 50%;
                margin:-300px 0 0 -500px;
                width: 1000px;
                height: 600px;
            }
            button{
                outline: none;
            }
        </style>
        <script type="text/javascript">
            $(function(){
                var url = location.href;
                var subURL = url.substr(url.indexOf("=")+1,url.length)
                $("#example-video source").attr("src", subURL);
                var player = videojs('example-video', {
                    "poster": "",
                    "controls": "true"
                }, function() {
                    // 播放
                    this.on('play', function() {
                    });
                        
                    //暂停
                    this.on('pause', function() {
                    });
                        
                    // 结束
                    this.on('ended', function() {
                    })
                        
                });
            });
        </script>
    </head>

    <body>
        <section id="videoPlayer">
            <video id="example-video" class="video-js vjs-default-skin vjs-big-play-centered" autoplay preload="metadata">
                <source src="" type="video/mp4">
            </video>
        </section>
    </body>
</html>

效果如下：

猜你喜欢