Question

在iOS设备上播放视频的问题（在iPhone 7和5s iOS 11上测试）

https://www.biznessapps.com/reseller/中有两个播放按钮，每个按钮在点击时都会显示全屏视频。

它在桌面浏览器上工作正常，但是当我在移动设备上单击“关闭”按钮（交叉标记）时，它会工作很奇怪，在第二次点击屏幕后显示为黑色，只播放音频。

我正在使用最新版本的Video.js：（v6.4.0） http://videojs.com/

步骤：

在Safari中打开https://www.biznessapps.com/progressive-web-apps/。
点按“观看视频”。
播放视频，然后点按“X”关闭按钮。

实际结果：视频未关闭，重新开启后，视频以黑屏播放。

视频：https://www.screencast.com/t/zEqRgLuW
注意：这也发生在其他页面上。

其他页面：

https://www.biznessapps.com/reseller/

https://www.biznessapps.com/progressive-web-apps/

参考代码：

<head>
    <link href="http://vjs.zencdn.net/6.4.0/video-js.css" rel="stylesheet">
    <link href="https://www.biznessapps.com/frontendwp/wp-content/themes/biznessapps-theme/style-min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://vjs.zencdn.net/6.4.0/video.js"></script>
</head>

<body class="page page-id-9888 page-template page-template-template-extra-full-width page-template-template-extra-full-width-php logged-in admin-bar is-page-reseller wpb-js-composer js-comp-ver-4.12 vc_responsive mpc-loaded customize-support">

    <div data-type="reseller" class="video-content">
        <div class="video-wrap">
            <div class="video-mask"></div>
        </div>
    </div>


    <!-- FULL WIDTH VIDEO -->
    <!-- Reseller Hero -->
    <div data-name="reseller_hero" class="full-width-video" id="full_width_video_reseller_hero">
        <div class="video-close"></div>
        <video id="video_full_reseller_hero" class="video-js vjs-default-skin">
            <source src="https://player.vimeo.com/external/237113285.hd.mp4?s=e562af1d980dbd405f142c7f9ca72346e8892386&profile_id=174" type="video/mp4">
        </video>
    </div>

    <!-- Reseller Team -->
    <div data-name="reseller_team" class="full-width-video" id="full_width_video_reseller_team">
        <div class="video-close"></div>
        <video id="video_full_reseller_team" class="video-js vjs-default-skin">
            <source src="https://player.vimeo.com/external/207374075.hd.mp4?s=250498588d84bc39b88e39cb101177684defdf56&profile_id=175" type="video/mp4">
        </video>
    </div>


    <div class="white-play-video">
        <a href="javascript:;" class="btn-play-video" data-video-id="reseller_hero"><span class="play-circle"><i class="fa fa-play"></i></span><span class="lbl">Watch the video</span></a>
    </div>

    <script type="text/javascript">
        var fullWidthPlayers = {};

        $(".btn-play-video").each(function() {
            var $btn = $(this),
                videoId = $btn.data('videoId') || framework.fwVideo.videoType;

            var $videoContainer = $('#full_width_video_' + videoId);
            if ($videoContainer.length == 0) {
              console.error('[framework.fwVideo.init] Video container is not found for ' + videoId + '. Skipping');
              return true;
            }

            var $videoFull = $videoContainer.find('video');

            fullWidthPlayers[videoId] = videojs($videoFull[0], {
                techOrder: ['html5'],
                controls: true,
                autoplay: false,
                preload: 'auto',
                width: '100%',
                height: '100%'
            });
        })
    </script>

</body>

请注意，当前页面中存在此问题的实际JS不直接包含CDN中的video.js，而是通过Gulpfile创建带有require()函数的bundle.js。

Videojs在移动设备上运行不佳

0 个答案: