I'm working on WordPress site, and have programmatically integrated Video.js player in it. The screen is black and i can hear the audios. Most probably, it's due of bandwidth (as shown in screenshot attached).
Sometimes i'm able to watch videos, but most of the times, its black screen.
How to fix this issue. My code is as:
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
</head>
<body>
<?php
$var_value = $_GET['video_id'];
?>
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" data-setup='{}'>
<source src="https://d3eykkkvwlu40v.cloudfront.net/v2/hls/<?php echo $var_value?>/<?php echo $var_value?>.m3u8" type="application/x-mpegURL">
</video>
<script src="http://static.jsbin.com/js/render/edit.js?4.0.4"></script>
Please guide. Thanks.
The Media Source Extension (MSE) in browsers don't support that you dynamically switch between an audio/video and an audio-only stream or vice versa. So if the player starts with the audio-only variant it won't be able to switch up at all or just plays the audio of that variant.
Theoretically it would be possible for a player to switch between those variants by re-initializing the MSE for every such switch. But I don't know if any player supporting this, for good reasons:
This would be a bad user experience.
So I think there are three options: live with it, remove the audio-only variant or find/build a player that supports this. I'd go for the removal.