video.js---H5视频播放器

自定义的弹层播放器

<link rel="stylesheet" href="https://cdn.bootcss.com/video.js/7.7.6/alt/video-js-cdn.min.css">
 <!-- 视频占位结构 -->
<div class="video-placeholder" data-src="https://v-cdn.zjol.com.cn/277000.mp4">
     <img src="./images/placeholder.jpg" alt="">
 </div>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/video.js/7.7.6/alt/video.core.min.js"></script>

var htmlStr = `<!-- 视频播放器 -->
        <div class="my-video-box">
            <video
              x5-video-player-fullscreen="true"
            webkit-playsinline="true"
            x-webkit-airplay="true"
            playsinline="true"
            x5-playsinline
             id="myVideo"
             class="video-js vjs-default-skin" 
            controls 
             poster="">
                <source src="${$('.video-placeholder').attr('data-src')}" type="video/mp4" />
            </video>
        </div>`;

        // 结构注入
        // $('head').append(`<link rel="stylesheet" href="https://cdn.bootcss.com/video.js/7.7.6/alt/video-js-cdn.min.css">`);
       // $('body').append(`<script src="https://cdn.bootcss.com/video.js/7.7.6/alt/video.core.min.js"></script>`);
        $('body').append(htmlStr);

        var myPlayer = videojs('myVideo');

        $('.video-placeholder').on('click', function () {
            var videoSrc = $(this).attr('data-src');
            if (!videoSrc) {
                alert('视频链接出错,请稍后再试!')
                return false;
            };
            myPlayer.src(videoSrc); //设置当前资源的URL
            myPlayer.load();
            $('.my-video-box').show();
            myPlayer.play();

            // 去除视频黑边,高度自适应
            $('video')[0].addEventListener('canplay', function () {
              //  this.videoWidth; 视频原始宽度
              //  this.videoHeight; 视频原始高度
                var ratio = $('#myVideo').width() / this.videoWidth;
                $('#myVideo').css('height', this.videoHeight * ratio);
            });
        });

        // 暂停
        $('.my-video-box').on('touchstart', '#myVideo_html5_api', function () {
            myPlayer.pause();
        });
        myPlayer.on('pause', function () {
            // console.log('暂停');
            $('.vjs-big-play-button').show();
        });

        // 播放
        $('.my-video-box').on('touchstart', '.vjs-big-play-button', function () {
            myPlayer.play();
        });
        myPlayer.on('play', function () {
            // console.log('播放');
            $('.vjs-big-play-button').hide();
        });

        // 退出
        $('.my-video-box').click(function () {
            // console.log('退出');
            myPlayer.pause();
            $('.my-video-box').hide();
            $('.vjs-big-play-button').hide();
        });

 // 视频播放器
    .my-video-box {
        max-width: 750px;
        display: none;
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 100;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, 0.7);

        #myVideo {
            width: 100%;
            height: 50%;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

        .vjs-big-play-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 1.2rem;
            height: 1.2rem;
            border-radius: 50%;

            .vjs-icon-placeholder::before {
                font-size: 0.8rem;
                width: auto;
                height: auto;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }