Videojs is not working well in mobile devices

An issue with playing the video on iOS devices (tested on iPhone 7 and 5s iOS 11)

There are two play buttons in https://www.biznessapps.com/reseller/ and each of them shows full screen video when clicked.

It works fine on desktop browsers, but when I click Close button (cross-mark) on mobile devices, it works odd and after second clicking the screen is black and just audio is played.

I'm using the latest version of Video.js: (v6.4.0) http://videojs.com/

Steps:

Open https://www.biznessapps.com/progressive-web-apps/ in Safari.
Tap on "Watch the video".
Play the video and tap close button "X".

Actual result: video does not close and after reopening the video plays with a black screen.

Video: https://www.screencast.com/t/zEqRgLuW
Note: This is happening on other pages as well.

Other pages:

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

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

Code for reference:

<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>

Please note that actual JS in the current pages with this issue does not include video.js from CDN directly and it creates bundle.js with require() functions by Gulpfile.

Videojs is not working well in mobile devices

0 Answers