How to play any live streaming url in html - html

Im trying some live streaming url like m3u8 url in my blog site which is made by html. But Some streaming link have some more part then m3u8.
Example: http://31.172.87.20:2200/EX/ptvsportshd-pa/tracks-v1a1/mono.m3u8?token=RED_Hqqv1c3nXjqlzBGFPhFuTg==,165803831455.4814651659=|User-agent=REDLINECLIENT
Here you can see a part after m3u8.
Also some link work on VLC Player & MX Player Or Any IPTV player but Don't work in chrome or html web pages.
Example: http://103.99.249.107:81/play/a02m
So my question is how can i play this link into my blogger web page.
Im using this html & js code--
Js Code:
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
html code:
<video width="100%" height="100%" poster="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRjB3bOuf7_8FUI1wxGl4f-A3_C9LUpncH5FDp7N2uvXqNopsWb-XQj27o&s=10" controls>
<source src="http://103.199.161.254/Content/ddsports/Live/Channel(DDSPORTS)/index.m3u8" type="application/x-mpegURL">
Can anyone help me?? So that i can play every live stream in html web page? Which is working on iptv player?
Thanks in advance

The parts after the '?' in the URL are parameter that are being passed.
In the example above they seem to be related to authentication of the user or device and some info about the client type.
Many devices and browsers will also not stream HTTP, as opposed to HTTPS, streams by default.
You also need to make sure you have the rights to play the content.
For your blog example, DDSPORTS actually provide some of their livestream on YouTube so you can directly embed that if you are comfortable with the approach (use share button on YouTube and select embed).

Related

How to fix embed code to display video cleanly/properly?

I am trying to embed a video onto my website but having difficulties with the standard embed code.
Here is a link to my webpage:
https://southhemitv.com/2019/07/08/test-jul-9-2019/
The standard embed code displays a very small video player with large black borders. Adding height="500" improves the size but then some extra features are added such as the chinese text at above the video.
I would like to hide this extra text so viewers only see the video and the player controls. (Edit) It has been suggested i store the video on my own server but i am not able to download certain videos and because its expensive most websites embed videos rather than store them on their server
If anyone could help it would be very appreciated.
The original embed code:
~<iframe src="//player.bilibili.com/player.html?aid=13125324&cid=21539921&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>~
Link to original video:
https://www.bilibili.com/video/av13125324/
Many thanks
Download the video, then serve it from your own server or via CDN, use a videoplayer that you like and supports your video filetype.
The apparent issue here is the player's graphical interface.
Since you fetch the video from a website, it uses that website's video player (I think?).
In any case, just manually download the video & use the video player of your choice.

Is there any way to show vidoe file on web page for free?

Im looking for a plugin or any open source for showing video file on webpage. but there are sooooooo many things and I can't find different things between those.
I aleady know that HTML5 and web browser provide a way. Then why there are such many sites and companies ?
And can you give me any recommendation on open source or site or company or anything?
There are two approaches to show video on a web page:
Host video to some video streaming website like youtube etc..
Host it on your server.
Best way is to upload video to youtube and embed the same to your web page like:
<iframe width="420" height="315"
src="https://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>
Alternatively if you want to host video on your server then there are multiple frameworks to do this:
media element js http://mediaelementjs.com/
videojs http://videojs.com/

Site or html page like youtube video directly from server

Ok i wanna do a simple question but i do not know if it comes also with a simple answer..
I will ask the simplest scenario that derives from this question... How can i "put" a video in a html page(site) from my pc or server that can be watched by everyone.
I dont want to embed a youtube video in the site but i want that video to be "embed" from my server or pc. What im actually asking is how to make a site like youtube(remove the part that users can upload videos) that has videos and are being "streamed"(i think thats the word) directly from youtube servers.
Given your file tree looks like this :
index.html -- The web page you're serving
media/
media/bunny.mp4 -- Your video file
media/bunny.jpg -- [optional] A cover picture while the use plays the video.
And in index.html
<video src="media/bunny.mp4" width="400" height="222" controls poster="media/bunny.jpg"></video>
But if you're searching for an alternative where the user can't download the file (and that is a requirement even Youtube doesn't fulfil), you can read this post HTML5 live streaming
Or simply use a ready solution like Plex Media Server

Load a video from an external resource in my web hosting

I have a simple web page written in HTML for testing video streaming.
<video controls name="media">
<source src="external_url.mp4" type="video/mp4">
</video>
That's work in local, but when I upload the page on my free web hosting, the page doesn't load any video. Is there a workaround? Maybe using an embedded player?
update
I've discovered that's a problem related to video. Unfortunately I cannot link it because it's for a private presentation, but I've tried with other videos and that works well. Any idea why my video doesn't play?
Please check that the URL is intact.
Check if there might be some file discrepancies. The control currently supports mp4, ogg, and webm as seen here.
Use the canPlayType() method to test the site AFTER the upload - just to be sure we're covered on that front. See here for the DOM reference.
You can fiddle around here if you don't want to have to upload the site first before live-testing it.
Hope that helps.
How do you upload the video? If FTP, text transfer mode may have ruined the file. The hosting (especially, a free one) can impose a limit on the file size (uploaded or served) too. Or even on content types (e.g. narod.ru didn't allow to read files directly, serving a "download page" on an attempt instead).
Try to download the video file directly and compare it with the reference one.

YouTube iframe Embed Blank On Mobile

I'm doing a simple iframe embed with YouTube videos on a website which is going to be viewed on mobile and desktop. The code I'm using to embed videos is this:
<iframe src="https://www.youtube.com/v/VIDEO_ID"></iframe>
I was under the impression that a HTML5 player would be served if Flash wasn't available, however when I debug this on a mobile the video is being served in Flash and not working.
Am I using the wrong URL or are there extra things which need to be done to embed the video properly? I've noticed that you can do an iframe embed using JavaScript too.
Here is the actual problem that occurred in your case.
When you embed a youtube video with the following code <iframe src="https://www.youtube.com/v/VIDEO_ID"></iframe>
a flash player is actually loaded. In this case your mobile doesn't support flash.
To rectify this issue you can use an HTML5 player which has the following structure <iframe src="https://www.youtube.com/embed/VIDEO_ID"></iframe>
You can use this youtube code generator for generating customized player embed code.
Somehow I ended up using the wrong URL, for iframe embedding you must use: http://www.youtube.com/embed/VIDEO_ID
https://developers.google.com/youtube/iframe_api_reference