What I’m trying to do:
I’m trying to stream (HLS) M3U8 format on my website (URL provided below. The content of the video stream is pure nonsense, so please disregard, I’m trying to get the theory of the case. I’m using AWS S3, MediaConvert, and MediaTailor to stitch custom ads into my videos)
What I’ve tried and what’s not working:
I’ve gotten this to work successfully in VLC, as well as the Safari browser, but it it hangs after 5 seconds in the other browsers I’ve tried: Chrome, Edge, and Opera, and I can’t figure out why. Does anyone have experience with streaming video?
Code Sample:
<!-- CSS -->
<link href="https://vjs.zencdn.net/7.2.3/video-js.css" rel="stylesheet">
<!-- HTML -->
<video id='hls-example' class="video-js vjs-default-skin" width="400" height="300" controls>
<source type="application/x-mpegURL" src="https://0fe21ebfb2c5438f9125bf51ef6c0618.mediatailor.us-east-2.amazonaws.com/v1/master/13123ef9ca586d777e60fe79dea933aa4917cbd5/WSPYWebsiteCampaign/test.m3u8">
</video>
<!-- JS code -->
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<script src="https://vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.14.1/videojs-contrib-hls.js"></script>
<script src="https://vjs.zencdn.net/7.2.3/video.js"></script>
<script>
var player = videojs('hls-example');
player.play();
</script>
Clone link:
share a copy of your app