video.jsのVolumeControlをiOSで表示する

iOSでインライン動画自動再生をしたときにミュート解除ができないのは不便なので、 iOSでもボリュームコントロールを表示できるか試行錯誤してみた。

playerの再生開始イベントでshow()を呼ぶと表示できるみたい。

環境

• video.js (6.8.0)
• iOS 11

Code

<video id="video_player" class="video-js vjs-default-skin" controls preload playsinline muted>
    <source src="" type="application/x-mpegURL">
</video>
/* ... */
<script>
var player = videojs('video_player');
player.ready(function() {
    player.on('play', function() {
            player.controlBar.volumePanel.show();
            player.controlBar.volumePanel.volumeControl.show();
            player.controlBar.volumePanel.muteToggle.show();
    });
});
</script>