How to open a blob:url in a HTML5 Video - html

So I wanted to add an HTML5 Video object from another website to my website. On some websites, I can just copy the URL from the src but on some, I can't - because of the blob. I tried to copy the whole object but it shows nothing on my website. I tried this on a website which gives you access to a lot of TV channels and movies (legally) and I noticed that they used a classic HTML5 Video player so I thought I could just embed it to my website. I did this on other websites - I could even just left click on the video object and click on "Open video in new tab" and I could copy the video object from there. But on this website that option is faded out but there is a "Cast" option. Here is the video object from the website:
<video data-v-6c3a6820="" id="player" width="1366" height="768" crossorigin="anonymus" class="video-js vjs-default-skin vjs-big-play-centered" data-viblast-key="d6293ad219a4af6550b20f07e66451d72d53c9a3ca77413f2eb2bd3c0b947827df882f2913d340fb42195b89764dd8db49ffb3ba29d41708" data-viblast-src="https://sbb-bg-ku-h1-35.ug-be.cdn.united.cloud/stream?i=dBYjXstwR9iFl6QFDTk5RA&a=4IfyeulCQOI0ox6iM05xTU7I77AJV196e3vMhwvZao19ijsvI0wc_g8lAYTyZuZYqiRxSiyFAntLl91PHmdZsc9NJVntuPghZ5s03ktRfMlpV7Gv3YPbDXNz-DKEMMems9PkKqRKugkDdnj8bcZSCcpMSWFyYCyXkI_ZIpikT6reNFualp09uiT5dQQlbCKd1C8mWxOAo6tF9pTYVC2hVckzX4cni5rj2-Kh7taIT7zAOEHIiRW4GnldTY83w5aOxMpSfY00pD9SX0xmyxMyW_9HUsecpBSX3s1kt-v9ekiQddiO2D98DwklA3OVLkDlE36YNLr1zoQR21ilMLes4jz70Ti9ycUJs4jaOE2w9kuKzixbx6_oH5nqXsebppWc&sp=sbb&u=2kfu9hq2ibxxyxr&player=m3u8v&session=ebcae820-2cd6-45be-92ef-1e5b6c6ee6a5" src="blob:https://eon.tv/01051a85-367f-4ca0-9b53-03c615f8436e"><p data-v-6c3a6820="" class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a data-v-6c3a6820="" href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p></video>

The Blob URL comes from JavaScript and is most likely a source using MediaSource Extensions. JavaScript can retrieve the video (usually in DASH or HLS format) and append content while the video tag is playing it back.
You should look at your network tab in your developer tools to find the DASH manifest URL or HLS playlist URL.

Related

How to play any live streaming url in 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).

Is it possible to get a direct audio file link from Soundcloud without JS

I've seen many posts about using JS to embed SoundCloud tracks with API links, but I'm wondering if there is any possible way to use only the <audio> and a SoundCloud file link in HTML?
The reason I need this is because I'm using Google Sheets as a widget for my website to display a list of audio files from different sources and using other sites and getting the mp3 link and throwing it in the list for the template works well but I can't do that with SoundCloud.
Preview of widget here
I know this is the URL I need:
http://api.soundcloud.com/tracks/TRACKID/stream?client_id=CLIENTID
I've tried inspecting the web page for this information, and it's not provided. I can only get the track ID.
My google sheet's template is connected to an app called awesome-table so I can put down a long list of data without needing to manually write the HTML each time so I need to make it a uniform process.
Each cell is referred to as {{URL}} in the following example
<audio controls> <source src="{{URL}}" type="audio/mpeg"> </audio>
The additional details, such as the third-party applications, are just to explain why I'm doing it this way. The question is simply how to get the right data of a Soundcloud track in a way I can directly apply <audio controls> <source src="(soundcloud track here)" type="audio/mpeg"> </audio>
Currently, the only way to do this is if the author has enabled RSS feed for the track and by using that RSS URL in the audio source.
http://feeds.soundcloud.com/stream/example.mp3
sorry if I am kind of late, but here is the correct answer:
Go copy the song URL (not the search result, be careful!)
Now, if you have VLC Media Player downloaded, open the app.
Press CTRL+N and paste it into the box.
Hit enter.
Your song will now load.
Rightclick the song name (be sure you are in playlist view in VLC) and click information (i).
On the bottom there should be a box with the text: File location.
Rightclick the box, click select all, and CTRL+C.
Now, this is your direct mp3 link.
This is mine.
https://cf-media.sndcdn.com/gesLueRDE5tg.128.mp3?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiKjovL2NmLW1lZGlhLnNuZGNkbi5jb20vZ2VzTHVlUkRFNXRnLjEyOC5tcDMiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE2MjIzMDY2Mzh9fX1dfQ__&Signature=L3tgjRJ2nnUP-9qOUBuSi9cJMQL-4aaLniOegTn2z~jnIfTrfr8oJ~JMzjiOLZHCe-sVbIaSiWt3hDEOhlf1YVLj71XF~qxV~l9LpMVtIf-V0ajRkVSBxtL8da1CVEzz4GV9~8K7twCjQhHpInHJp6tCGXU7xKb3IQ2MGVzUYX1yVhI0iBtv30ww6oDCW9MKX2qgn3dFBZ~Aw4dbLu0ba4ZnFdnto8bHZVBqqq0kY9Z5CaTmm1ikvssu37XkiFPH8b8nPI6pBfS7XvAH2M3R~pKLXIGSphlfG11VZVpXxArCcDni~WPUoQpy3S5zba6R5-KkOdM5O2FN5feJouOhAA__&Key-Pair-Id=APKAI6TU7MMXM5DG6EPQ
DONT KNOW ABOUT THE LINK VALIDITY LENGHT YET!!!
Viktor

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.

HTML embed rtmp video to page

If it is possible how can I embed a video which is played with this link to my webpage?
rtmp://192.168.178.22:1235/live
or this
rtsp://192.168.178.58:1935/test/myStream
That link is created using Wowza Streaming Engine.
In the Wowza panel it gets shown properly.
If I call the link in my browser I get nothing.
Any ideas?
You can embed the RTMP stream using a Flash based player like Strobe, JwPlayer, Flowplayer.
You can start from this Strobe setup tutorial provided by Wowza.

how to play embed OneDrive video on my end?

Not really sure if I can ask this so I hope its ok. I have my site where I would like to embed and play video which is stored on OneDrive cloud service. So far it sounds easy, however here's the thing: while I am actually allowed to embed it via provided embed iframe code, it can't be played unless its redirected on OneDrive site. I did my research all over the internet but it looks like dead end and no one really solved this mistery. This is what I got:
Official embed link:
<iframe src="https://onedrive.live.com/embed?cid=5FAC7D8A540D1B7A&resid=5FAC7D8A540D1B7A%21141&authkey=AM3Y3EuRuTPbKo0" width="320" height="240" frameborder="0" scrolling="no" allowfullscreen></iframe>
This embed is not playable from my site. after I press Play button it will redirect me to:
https://onedrive.live.com/redir.aspx?cid=5fac7d8a540d1b7a&resid=5FAC7D8A540D1B7A!141&parId=5FAC7D8A540D1B7A!140&authkey=!AM3Y3EuRuTPbKo0
then here:
https://onedrive.live.com/?cid=5fac7d8a540d1b7a&id=5FAC7D8A540D1B7A%21141&sff=1&authkey=!AM3Y3EuRuTPbKo0
and finaly here where I can play it:
https://onedrive.live.com/?authkey=%21AM3Y3EuRuTPbKo0&cid=5FAC7D8A540D1B7A&id=5FAC7D8A540D1B7A%21141&parId=5FAC7D8A540D1B7A%21140&o=OneUp
Official share link:
https://onedrive.live.com/redir?resid=5FAC7D8A540D1B7A!141&authkey=!AJVBaVimMA1e0cc&ithint=video%2cmp4
From this I found a way how to create direct download link by changing redir part with download:
https://onedrive.live.com/download?resid=5FAC7D8A540D1B7A!141&authkey=!AJVBaVimMA1e0cc&ithint=video%2cmp4
It can be put into <iframe> or <video> but it still can't be played. Also is possible to change redir to embed:
<iframe src="https://onedrive.live.com/embed?resid=5FAC7D8A540D1B7A!141&authkey=!AJVBaVimMA1e0cc&ithint=video%2cmp4" width="320" height="240" frameborder="0" scrolling="no" allowfullscreen></iframe>
which is pretty much same as official embed link. Then there are also strings like: &em=2 and &Embed=1 (not really sure what they stand for, but they do change redirected output) Example:
https://onedrive.live.com/embed?resid=5FAC7D8A540D1B7A!141&ithint=video%2cmp4&em=2&Embed=1
From what I understand these listed strings can be always skipped:
?cid=5FAC7D8A540D1B7A
&authkey=AM3Y3EuRuTPbKo0
&ithint=video%2cmp4
&id=5FAC7D8A540D1B7A%21141
&parId=5FAC7D8A540D1B7A%21140
&o=OneUp
With this, I am at point where embed is not embed at all. Its like new word to "redirect me to OneDrive and play me there". Ofcourse I also tried to get help at OneDrive support, but they play stupid! and keep asking me why would I need to play my video on my site when I can play it on my drive just fine. Apparently they mocking me. I am not really tryin' to use them as my ftp server (and even if I would its not their bussines till I violate their code of conduct), I just want to play my embed video on my site like I would with Youtube, Vimeo or Dailymotion. (Well, to be honest it wouldnt bother me so much if I wouldnt already purchased 2TB storage)
I in the end I looking for "true embeding" or at least "direct link" like I found when it comes to images: http://1drv.ms/1PbOhF8 where direct link is: https://u6gkqq.dm2303.livefilestore.com/y3mtdqmTctG9LFmZ_HLl1tYgUkWTiB8xkCZ0-nOKP2_SLzkuVXtzJzhavaA8axBWlqrVezVbDjA4bO-8AJjbVSp_Yc3luKWSiMVuhvRhnvYFie_FfOEQldmztKVtOlxGrG18AIftsAbOwfXORrB8TZ1EPZYFmKQ6KfmA8Q2TWqStxE/%D0%9D%D1%8C%D1%8E-%D0%99%D0%BE%D1%80%D0%BA-%D0%B0%D0%BC%D0%B5%D1%80%D0%B8%D0%BA%D0%B0-%D0%BA%D1%80%D0%B0%D1%81%D0%B8%D0%B2%D1%8B%D0%B5-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8-Tilt-Shift-2344711.jpeg?psid=1
I mean, there must be a way how to actually get direct link of stored file even if its video, right?
I even tried to insert video into my desktop MS PowerPoint 2013 and then upload it on OneDrive, get embed code, place it on my site and play it on my site. Problem is that such embed presentation can be viewed only by me and also only outside of fullscreen mode (entering into fullscreen will lead to redirect on OneDrive again). Here I attach share link + embeds:
http://1drv.ms/1Z33Xox
Embed from online OneDrive storage:
<iframe src="https://onedrive.live.com/embed?cid=5FAC7D8A540D1B7A&resid=5FAC7D8A540D1B7A%21143&authkey=AMrmlVIx_LeyX_g&em=2" width="402" height="327" frameborder="0" scrolling="no"></iframe>
Embed made from embeded embed:
<iframe src='https://onedrive.live.com/embed?cid=5FAC7D8A540D1B7A&resid=5FAC7D8A540D1B7A%21143&authkey=AMrmlVIx_LeyX_g&em=2&wdAr=1.7777777777777777&Embed=1' width='402px' height='327px' frameborder='0'></iframe>
Now, interesting is that for playing this presentation is used native HTML5 player. While on "share link" right-click menu is disabled (with oncontextmenu="javascript:return false;"), but while in embed mode, right-click menu is enabled however there is missing fullscreen on controls (allowfullscreen). Unfortunately video cant be saved or opened in new tab, because it will trigger downloading of some "mediahandler.ashx" file which is infact my video file with renamed extension! This is the address:
https://powerpoint.officeapps.live.com/p/mediahandler.ashx?PV=6&PF=5&Fi=SD5FAC7D8A540D1B7A!143&C=5_810_DM2-SKY-WAC-WSHI&ak=t%3D0%26s%3D0%26v%3D%21AMrmlVIx%5FLeyX%5Fg&z=257&usid=9992f846%2D2470%2D4a99%2Da07d%2Da26ffa761de7&Rid=2041958409%2Emp4%2Emedia&waccluster=DB3B&retries=3
which will redirect here and trigger download of ashx file -
https://powerpoint.officeapps.live.com/p/mediahandler.ashx?PV=6&PF=5&Fi=SD5FAC7D8A540D1B7A!143&C=5_810_DM2-SKY-WAC-WSHI&ak=t%3D0%26s%3D0%26v%3D%21AMrmlVIx_LeyX_g&z=257&usid=9992f846-2470-4a99-a07d-a26ffa761de7&Rid=2041958409%2Emp4%2Emedia&waccluster=DB3B&retries=3
any ideas, please ?
use video tag and in src attribute use the src value of iframe and change embed to download.Hope it will work.try it.
<video controls width="360" height="240">
<source src="https://onedrive.live.com/download?cid=5FAC7D8A540D1B7A&resid=5FAC7D8A540D1B7A%21141&authkey=AM3Y3EuRuTPbKo0" type='video/mp4'/>
</video>
I clicked on your Official Share Link and in the top menu there is an item for "View Original" which, after clicking, takes me to the direct download link:
https://u6eqtg.dm.files.1drv.com/y4mFkEomS8JzzREaa-IhXyseplbhCfA84Z6hcTSQXf84jFDR5_9J1PSSulKVzZqfLBs_wGqombsF45k4k3P_pZky7a1t0XOPEduQFQlhog8VshPfMzcue76CBDxU_Uz37zFAadc5gkokilYAHz5iq_FCSbgV6ago5AP8Vj5bkEb_37O5LwIooZAEQtOwa89zcAH12SNGGnW5kDX_2buZxcZbxAzOzfgPOVZHCMbkjZsr5Y/Pilobulos_Symbiosis_2005-480p.mp4?psid=1
By the way, if you have a folder full of files that require a direct download URL, I found that this answer is useful for grabbing all the direct links in a shareable folder.
Came across this which worked https://blog.omaration.com/embedding-videos-from-onedrive-into-your-blog/
Basically: take the embed src= value and use that in your HTML5 video src=, but change ?embed to ?download.