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
Related
I just noticed that Chrome (Version 45.0.2454.99 m) basically reloads a video each time it loops. This occurs with even the most narrowed down version of my code :
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<video autoplay="autoplay" loop="loop">
<source src="myvideo.mp4" type="video/mp4" >
</video>
</body>
</html>
This occurs independently of the hosting technique (tried local, Google drive and 2 classic hosting solutions) AND is not related to cache-control HTTP headers, those only ensuring the video isn't reloaded from the source each time but from the client-cache.
As it seems to be a Chrome bug and I can make this not too visible for the user I could live with that, but still, on airbnb website, they have a header video looping and NOT being reloaded by Chrome. I tried mimicking their HTML which isn't much more complicated than the example above, video gets reloaded on each loop, so I know for sure there must be some kind of workaround for this implemented on their site. Their JS code is minified though, therefore very hard to debug and I don't have even the beginning of a clue on how they do it. So my question would be: has everybody encountered this issue and found a workaround he could share with us ?
This could be caused by having "disabled Cache" ticked in the Chrome Developer Tab.
If not, you can use the App Cache to fix or service worker to load the video from Cache.
This issue was covered here:
Why html5 video loop create request each iteration
Probably fixed in newer version of Chrome
I'm preparing to update some old pages to HTML5, and was surprised to see that it worked in Chrome, but not the latest Firefox (v.33.1... also tried v.32). What is odd is this... In Firefox it actually WILL play IF you "coax it". If you move the video position slider to someplace beyond the start (about 5 seconds in) and THEN click play, all is well. Further inspection showed that when I click play, the file pointer was jumping to the end of the file leaving my "poster" photo intact, leading the viewer to think there is nothing else they can do. If, however, you manually move the pointer back to anyplace beyond the first couple of seconds of the file (really!), and THEN click the PLAY button, FF will play the rest of the video fine.
Sometimes i think that to the more technically minded among us, the universe doles out the weirder problems, while God laughs.
I'd suspect video file corruption, but all my conversions were made with the very reliable ffmpeg utility, and tested with VLC. Again, it works fine from Chrome, which supposedly uses the same video format. Here's a link...
FF will play the older type ogv files, so if this is one of those things where FF, now at version 33 is at fault, I'll have to detect the browser and write the order myself with a document.write(). But it would be nice to know if there is a more straigh forward solution.
Note that I have tried adding the mime types to my HTACESS file. But the fact that the behavior is the same when point my browsers directly the file on my local machine, makles me doubt that is the problem.
http://pixyland.org/peterpan/OurWedding2a.html
And here is the page code
<!DOCTYPE html >
<html>
<head>
<title>Our Fairy Wonderful Wedding Day... The Arrival!!
</title>
<link rel="shortcut icon" href="/pixyland.ico" >
</head>
<body marginwidth="10" leftmargin="10" rightmargin="10" bgcolor="#33cc99" link="#333399" >
<table align="center" border="1"><tr><td align="center">
<div id='vtLocation' align="center">
<video width="640" height ="480" controls poster="Imagezz/Wedding/arIMG_2280.JPG">
<source src ="../vids/Arrival.mp4" type="video/mp4"> <!--cSafari / iOS -->
<source src ="../vids/Arrival.webm" type="video/webm"> <!-- Firefox / Opera / Chrome -->
<source src ="../vids/Arrival.ogv" type="video/ogg" > <!-- older Firefox / Opera / Chrome -->
<!-- download as last resort -->
<p>If you are unable to view the video, here are some links to download <br>
in a a few well supported video formats. You may be able to just download <br>
and play one of these files without the browser.<br><br>
<strong>Download Video:</strong>nbsp;
nbsp;"MP4"
nbsp;"WEBM"
nbsp;"Ogg"
</p>
</video>
</div>
</table>
</body>
</html>
Found this suggestion that may be worth trying
fmpeg -i input.webm -codec copy -avoid_negative_ts 1 output.webm
https://stackoverflow.com/a/19639848/1686036
It seemed to help me, although it could be something else "unusual" with FF
We have to link a video in our website and i found out IE6 only supports .swf format videos. But IE prompting for allowing active component every time i open the web page. I found out there is a security option in tools->advanced->security. But is there anyway to do this using html code? Or is there any other way to post video in website that IE6 can support??
Here is our html code
<!DOCTYPE html>
<html>
<body>
<h2>Click the Link to Play the Object</h2>
Play a video file
</body>
</html>
This is a user-controlled setting that is deliberately hidden from developers, such that the user (or administrator) can prevent active components from executing no matter what web authors want for their content. There's no way to control this from the code, I'm afraid!
There are other video formats: Windows Media format (.wmv) is available on Windows by default, but there's also QuickTime, SilverLight… and a whole host of less popular formats. But these are all active components, and as such will all be subjected to the same user opt-in, dependeing on how the user's machine is configured.
The code provided below is present in an html file. When opening the file in Firefox there is a black box being shown instead of the video. Does this mean an addon, extension, or application needs updating or a setting in Firefox needs changing?
<!DOCTYPE html>
<html>
<body>
<iframe width="420" height="345"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>
</body>
</html>
I made a mistake. This code actually worked, but I thought it didn't work a few times even though it did. I actually tried using a different Youtube video, and it wasn't working because I manually coded what src equaled incorrectly as opposed to just right-clicking the Youtube video and selecting "Copy embed html". So the problem had nothing to do with browsers, addons, plugins, extensions, or updates. I just had incorrect code for src.
Note: Use the "Copy embed html" feature as opposed to manually trying to enter in the code.
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'.