iFraming a page with streaming video - video does not display - html

I am trying to iframe a page containing a streaming video. The streaming video does not work when I view the iframe. It works fine when the original page is viewed directly in browser. What am I missing here? Is the stremaing video protected by some mechanism that does not let is display within the iframe?
Please also suggest any alternative solution to be able to display external streaming videos on my site.
Thanks!
The iframe code is
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<BODY>
<iframe src="http://aajtak.intoday.in/livetv.php" width='800px' height='1000px' />
</BODY>
</HTML>

In your screenshot, you are showing you are trying this from a file:// URL.
I don't know which security shenanigans are involved (The browser's or Flash's), but I'm fairly sure it will go away if you use a http:// URL instead.
Working JSFiddle

It's because of Cross Origin problem. Since you are using file://, it cannot play the video from 'http://' or 'https://'. If you can run your page in 'http://' or 'https://' at localhost, you will make it easy to work. In addition, if it does not work, you can set 'cross-origin' as 'anonymous'.

Related

Embedding websites in html

I am trying to figure out the way this website : totallyscience.co embeds their games into the site because I am trying to make a website and I tried directly embedding a website and it isn't the same.
I tried < embed src="example.com" > and it is definitely not the same as the website listed above.
What you need here AND what totallyscience.co uses is an iframe tag
<iframe src="http://www.example.com" title="Embedding another webpage"></iframe>
You can style and position it as you need.
tip : Try to use secure links (https) in iframe. You can use a https link in a page loaded over http but not the other way.
For further reading: https://www.w3schools.com/tags/tag_iframe.ASP

how to make html webpage a part of website

I've just created my own website with my own domain with IONOS.
On the side, I had created a webpage which was hosted using XAMP, so currently to view my webpage I have to use the URL http://localhost/project1/index.html#
However, I'd like to integrate it into my website if possible?
For example have a section on my webpage where I show a thumbnail of the webpage and when clicked it takes me to www.mywebsite.co.uk/project1
I'm not sure how to go about this though?
You can use Iframe.
See Html Standard and w3schools for more detail about it.
like:
<iframe src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials"></iframe>
The <iframe> tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document.
<iframe src="www.mywebsite.co.uk/project1" title="My HTML Page"></iframe>

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).

IE wanting to download contents in IFrame

I have a problem with getting this to work and I am hoping someone can give me the solution. The below code is supposed to show a live video in the IFrame as you can see its pulling the video from an open port on my server.
This works great in Chrome and Safari but in IE it asks to download the video. Why is it doing this? How can I fix this?
The video is being broadcast live from my webcam plugged into my server using Motion. I am unsure of the type of video it creates I think it might be a MotionJPEG but I could be wrong.
Also if I try and view this on a mobile platform it does not work it will spit out a ton of garbage constantly in Chrome mobile and in Safari mobile it will only show one frame of the picture. Is there a way to make this work on mobile devices?
Update: after researching on their website I found out that it uses multipart/x-mixed-replace which after some digging its saying IE does not support this. Is there a work around?
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<script type='text/javascript' src='script.js'></script>
<title>Testing</title>
</head>
<body>
<input type='button' onclick='MakeRequest();' value='Press to see something cool'/>
<div id='ResponseDiv'>
</div>
<iframe id="video" src="http://192.168.0.11:8081" height="120" width="160"></iframe>
</body>
</html>
IE doesn't support MotionJPEG format so your best option would be to use a viewer (eg Cambozola - as per these instructions http://www.lavrsen.dk/foswiki/bin/view/Motion/WebcamServer) or if you're feeling more adventurous you may be able to get MPlayer or Vlan to convert from the mjpeg to mp4 on the fly and then you can consume the stream more easily on multiple platforms

How could I hide the url of a site within an iframe?

I have a site that has an iframe linking to another site with the following example iframe code:
<html>
<body>
<iframe src="http://google.com" width="100%" height="600">
</iframe>
</body>
</html>
So, for the above example, how could I prevent visitors from finding the url: http://google.com ?
You can't. Suffice to browse the source code and see it. And even if you try to put this in an obfuscated javascript file which will dynamically set the src property of the iframe nothing can't be hidden from the Net tab in FireBug. So I would recommend you not wasting your time with this.
You can write e.g. PHP or Apache rewrite to fetch the page from backend server. This has very little CPU overhead.
You could nest an iframe in another site / page and point the iframe on your current page to that one.
This would obfuscate it to some degree but if someone is intent on finding the URL, chances are they will.