video.js | Code Bank

RTMP is used for streaming live video. With a bit of manipulation of the frontend codes it can also be used to play audio only (the below code does that)

Now the thing is playing RTMP link in browser requires Flash which is not supported by Apple and Linux based OS. The solution is to use the HLS link instead of the RTMP link. The HLS format is supported by most browsers and by Apple and Linux based OS also.

One thing to note is the MIME type of the source.

There are various Javascript libraries that can be used to build the player. Below is an example using Video.js

This internally uses the http-streaming library of Videojs. Details of the library can be found here This library is included in video.js 7 by default. Hence in the below code it has not been added separately

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Live Streaming</title>
    <link href="https://vjs.zencdn.net/7.6.6/video-js.css" rel="stylesheet" />

	<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
	<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
	<script src="https://vjs.zencdn.net/7.6.6/video.js"></script>
</head>
<body>
<audio id="player" class="video-js vjs-default-skin" height="70" width="300" controls autoplay preload="none">
    <source src="https://rtmpserverBaseUrl/path/streamName.m3u8" type="application/x-mpegURL" />
</audio>

<script>
    var player = videojs('#player');
    videojs('player').ready(function() {
       this.play();
    });
</script>

<style>
.vjs-seek-to-live-control,
.vjs-fullscreen-control,
.vjs-picture-in-picture-control
 {
   display: none;
 }
</style>

</body>
</html>

Code courtesy – https://github.com/videojs/http-streaming

Both libraries used in the code can be downloaded from here
videojs version 7.6.6
videojs-ie8.min version 1.1.2

Code Bank

Tag Archives: video.js

Playing RTMP in Browser without FLASH