Can I have an example of a basic stream demo?

[adgsenpai]

Hi, can you show me a demo how you can render an anime video/episode in HTML/JavaScript?

Nothing fancy just render the anime episode video in a blank HTML file. Can you show me how to render anyone of that below? I will be very grateful if you can give me an easy example to work with. I will build the anime app for cross platform and also use your guys API.

My stack I will use is Python, React.JS and my custom WEBSDK called ADGWEBSDK.

{
    "headers": {
        "Referer": "https://gogoplay.io/"
    },
    "data": [
        {
            "file": "https://vidstreamingcdn.com/cdn34/a96411258da4b8a75319906d0cc507f7/EP.18.v0.1644104042.360p.mp4?mac=7GmeilE5nn5L7xGZqxt4YNTnzQ53eEazGha0ZBD15WU%3D&vip=&expiry=1644122389382",
            "label": "360 P",
            "type": "mp4"
        },
        {
            "file": "https://vidstreamingcdn.com/cdn34/a96411258da4b8a75319906d0cc507f7/EP.18.v0.1644104042.480p.mp4?mac=JBKmkO3IViHhGVSsXLekTDjhGICtfkmvXPuW7wEPGuw%3D&vip=&expiry=1644122389440",
            "label": "480 P",
            "type": "mp4"
        },
        {
            "file": "https://vidstreamingcdn.com/cdn34/a96411258da4b8a75319906d0cc507f7/EP.18.v0.1644104042.720p.mp4?mac=wx74gKGn9SeKI%2BFJRUbR6n3ohlwcdf9ANYZhJgtSG54%3D&vip=&expiry=1644122389494",
            "label": "720 P",
            "type": "mp4"
        },
        {
            "file": "https://vidstreamingcdn.com/cdn34/a96411258da4b8a75319906d0cc507f7/EP.18.v0.1644104042.1080p.mp4?mac=vBygNaIMu43c33aeSeMzl%2Fp24QG5QTEzI6adjkaemIE%3D&vip=&expiry=1644122389554",
            "label": "1080 P",
            "type": "mp4"
        },
        {
            "file": "https://vidstreamingcdn.com/cdn34/a96411258da4b8a75319906d0cc507f7/EP.18.v0.1644104042.720p.mp4?mac=wx74gKGn9SeKI%2BFJRUbR6n3ohlwcdf9ANYZhJgtSG54%3D&vip=&expiry=1644122389494",
            "label": "Auto",
            "default": "true",
            "type": "mp4"
        }
    ]
}

[dhvitOP]

For html you can use default video tag with controls attribute of html. But the vidstreaming video links doesn't let you use it by cloudflare protection. Here is the simple example -

<video controls autoplay>
<source src="Your video URL here"  type="video/mp4" />
</video>

[dhvitOP]

Though video tag player cannot run m3u8 video files. For that you have to use some plugins like videojs which can parse it. (But plugins like videojs would use their ui player not default player)

[dhvitOP]

If your issue is resolved, you can close this issue at any time

[adgsenpai]

I know your guys did some magic when rendering the video/anime with the respective headers and referrer URL. Lets just say I will use VideoJS. Can you show me how to render any one anime on a blank canvas with these restrictions. Just asking for a demo which I can understand?

[dhvitOP]

ok first of all, we haven't touched referer url while getting video link. we have just used m3u8 files in every anime (not mp4) because even we can't access mp4 files. we have used source_bk array from response of gogoplay and sometimes have used source array's m3u8 url if source_bk one doesn't work.

here is a clear example for playing a m3u8 file using videojs -

          <source type="application/x-mpegURL" src=" m3u8 url here "></source>
</video> 
<script>
  <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>
var player = videojs('media');
player.play();
    player.on('error', function() {
  player.src({ type: 'application/x-mpegURL', src: "Backup m3u8 url here like source array one" });
});
</script>```

I know its a bit confusing but check api.js scrapeMP4 function and watch.ejs html file in views folder more deeply.

[adgsenpai]

Owner

Thanks alot! Will try it. I will close issue now.