How to embed streaming Video (rtmp protocol) in HTML web page?

I found the way to run my own rtmp server and I have an mp4 video too. With VLC I can consume the rtmp file but I need to embed the video in an HTML web page. I saw the following link: https://www.codeproject.com/Tips/668131/How-to-embed-streaming-Video-rtmp-protocol-in-HTML. But didn't work for me.

I also read that you can use something called JWPlayer.....But I didn't understand how it works or which steps you need to follow for use it.

I know there is a lot of post in the internet about this topic , Can anyone give me an example? (i mean HTML code)

Thanks in advance!!

Eric.

Solution

Finally I solved my problem. I had to use Flowplayer to show my rtmp videos on a website.

Here are the steps I followed:

1 - wget http://releases.flowplayer.org/flowplayer.rtmp/flowplayer.rtmp-3.2.13.swf (on rtmp server, specifically in usr/local/nginx/html/)

2 - Open the html that I create and leave it like this (in my case was test.html):

<html>
<head>
    <script src="http://releases.flowplayer.org/js/flowplayer-
      3.2.12.min.js"></script>
</head>

<body>
    <div id="player" style="width:644px;height:276px;margin:0 auto;text-align:center">
        <img src="/path/to/background.png" height="260" width="489" />
    </div>
    <script>
        $f("player", "http://releases.flowplayer.org/swf/flowplayer-
    3.2.16. swf ", {
        clip: {
            url: '<YOUR_FILE.flv>',
            scaling: 'fit',
            provider: 'hddn'
        },

        plugins: {
            hddn: {
                url: "flowplayer.rtmp-3.2.13.swf",

                netConnectionUrl: 'rtmp://<IP_OF_THE_SERVER>:1935/vod'
            }
        },
        canvas: {
            backgroundGradient: 'none'
        }
        });
    </script>
</body>
</html>

3 - Modify the values of the netConnectionUrl, and url.

4 - Navigate the server (in my case http://10.11.1.11/test.html)

And it works!.