I am using load-balancing in my application hosted in ColdFusion 9 application server and am trying to play an mp4 video. I am displaying the video directly in the browser by clicking an anchor tag. Its working fine in IE, but does not work in Firefox. Firefox displays some junk characters like squares and question marks. There is no video or error message. However, when I run the same application without load-balancing its working fine in FF. Is the issue is due to the load balancing or do I need to set a MIME type?
Note: I am using FF 23.0
I tried with HTML 5 tag with flash fallback support. The code is `
<source src="https://#CGI.SERVER_NAME#/video.mp4" type="video/mp4">
<source src="https://#CGI.SERVER_NAME#/video.webm" type="video/webm">
<!--- Flash player code to play video in HTML5 non support browser --->
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="1000" height="600">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="allowFullScreen" value="true">
<param name="wmode" value="transparent">
<param name="flashVars" value="config={'playlist':[{'url':'https://#CGI.SERVER_NAME#/video.mp4','autoPlay':true}]}">
</object>
</video>`
Also I added MIME types in httpd.conf file of Apache server. The MIME types are,
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
Now its working fine.
Related
I have a problem playing HLS (m3u8).
I have a System with some Live streams. To play these streams I wrote a Webpage using Videojs.
This runs smoothly on Desktop with Chrome, Firefox and even Edge.
But with Mobile the Firefox wont play it anymore.
The Firefox Browser gets the playlist, shows the first frame and gets stuck. It then shows the following error:
A network error caused the media download to fail partway.
the code Iam using looks like this
<div>
<video
id="my-video"
class="video-js vjs-big-play-centered"
controls
<?php if(isset($_GET["autoplay"])) echo "autoplay"; ?>
preload="auto"
width="1920"
height="1080"
poster="pic/Video_Hintergrund.png"
data-setup='{"fluid": true}'
onplay="onVideoStartPlaying();"
onpause="onVideoStopPlaying();"
>
<source src="[...]/index.m3u8" type="application/x-mpegURL" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video>
</div>
The Webpage and the Stream are located on the same Server.
Does anyone have some tips what I can try?
I got my routing here:
get "/fortytwo" do
send_file("42.mp4")
end
And my HTML for the page that shall play the video is as follows:
<body>
<video controls autoplay>
<source src="fortytwo" type="video/mp4">
</video>
</body>
But when loading the page, a disabled video player shows up that won't play any media. Linking to a copy of the video that was uploaded to Dropbox with "dl=1" works perfectly fine.
The code you posted is working fine, so the problem must be somewhere else than in Sinatra. Maybe a CORS problem, where is your HTML file located? It should be on the same domain where Sinatra is running.
I remade the whole program (below) and it's working:
require 'sinatra'
get "/fortytwo" do
send_file("42.mp4")
end
get "/" do
page = <<-endfile
<body>
<video controls autoplay>
<source src="fortytwo" type="video/mp4">
</video>
</body>
endfile
end
I've (with help) added the video.js player to a web page and it plays well in all browsers except Firefox. When accessing via Firefox, and trying to play a video I see: "no video with supported format and MIME type found".
Here's my player code:
<object class="vjs-flash-fallback" width="640" height="264" type="application/x- shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://url.com/flowplayer/flowplayer-3.2.16.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":["[var.base_url]/[var.thumb_file]", {"url": "http://url.com/uploads/ [var.video_play]","autoPlay":false,"autoBuffering":true}]}' />
<!-- Image Fallback. Typically the same as the poster image. -->
<img src="[var.base_url]/[var.thumb_file]" width="640" height="264" alt="Poster Image" title="No video playback capabilities." />
</object>
</video>
Any suggestions/ideas/remedies will be appreciated.
Try changing your code to:
<video id="myMovie" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264">
<source src="/path/mymovie.mp4" type='video/mp4' />
<source src="/path/mymovie.webm" type='video/webm' />
</video>
video.js should handle all the necessary fallback nonsense that made embedding videos such a headache back in the day.
So, I'm just trying to put a simple html5 video player on this clients website while I do the rebuild.
Thought it would have been a straight forward thing to do but when I checked it in FF all I see is a dark box with a grey "x" in it.
I am using the latest FireFox 3.6.12.
You can see for yourselves here.
This is the code Im using - I thought it was valid html5 - maybe not?
CODE :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="reel2.css" type="text/css" media="screen" />
<title>Christopher Stewart - Theatrical and Commercial Reels</title>
</head>
<body>
<div class="main">
<div class="header">
<div class="back">
<img src="http://thechristopherstewart.com/REEL_files/ChrisStewart_Website.jpg" />
<span class="backbtn">——back</span>
</div>
<span class="page_title">Christopher Stewart: Video Reel</span>
<div class="theatrical">
<span class="title">Theatrical Reel</span><br><br>
<video width="640" height="480" preload controls>
<source src="reelvids/120610-reel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="reelvids/120610-reel.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="reelvids/120610-reel.theora.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
</div>
</div>
</div>
</body>
</html>
* EDIT 12/6/10 - 3:00pm *
After following a a tip that the video did not seem to be on the server I investigated; the video is on the server but is only accessible if ftp is entered into the browser - otherwise a 404 error is generated. Not sure why this is happening - if anyone out there knows how to fix this please let me know!
Thanks for all the great help!
It seems that out of those three only the .mp4 file exists on the server. Is that on purpose? Firefox probably doesn't support the codec used in the .mp4 file, and tries to fall back to your fallbacks which don't exist.
Edit: I can see that you're using IIS as your HTTP server of choice. I'll avoid going into your choice of software for now, but if the files actually exist on the server, this is likely caused by IIS's policy with unknown file extensions. IIS is made so that it refuses to send any files with unknown extensions to the client. If the extension is unknown, it returns a 404 error. IIS has a subcode of sorts for this, which it may show on its own error pages, but obviously the true HTTP error code is always 404. The code for "file not found" is 404.0, while the code for "unknown file extension" is 404.3 (here's a complete list of error codes).
You need to add those file extensions into your IIS configuration with the correct MIME types.
The problem was fixed by configuring the IIS as Matti Virkkunen suggested. The IIS for GoDaddy's hosting does not include the theora (.ogg, .ogv, .oga) file extensions or the .webm extension by default. This means that if you put a file with any of these extensions onto the server they won't be recognized and thus (in an effort to protect the user) will not be allowed to be viewed/interacted with by the user.
One way to solve this is to create a web.config (aka an xml file with a config extension on it) to force the server to accept certain MIME types. Then upload it onto the root hosting folder. Be careful you do not overwrite an existing web.config as it could cause your site to crash. Also, telling the IIS to allow a file type that it already allows (.mp4 for instance) will also cause unexpected errors. Before creating/editing your web.config file be sure to check in with the IIS's default permissions.
This is what my web.config file looks like to fix the GoDaddy IIS problem :
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension=".ogg" mimeType="audio/ogg" />
<mimeMap fileExtension=".oga" mimeType="audio/ogg" />
<mimeMap fileExtension=".ogv" mimeType="video/ogg" />
<mimeMap fileExtension=".webm" mimeType="video/webm"/>
</staticContent>
</system.webServer>
</configuration>
As far as I know FF3.6.x does not have HTML5 support. It does support HTML5 video tag, but only for specific codecs.
This is from http://support.mozilla.com/en-US/kb/Youtube%20HTML5%20does%20not%20work%20in%20Firefox
Youtube is currently testing HTML5,
but does not list Firefox as a
supported browser. While Firefox can
display HTML5 video, Youtube uses a
patented codec to encode the videos,
making it unusable by open-source
software like Firefox.
I used your code with my own videos, and if the referenced video files exist and are of the proper format, everything works.
I'm trying to make my Gadget html to navigate to another page, but when I try to do it via
window.location = 'http://newurl.com'
It opens the address in a default browser new window.
All I could do so far is to iframe the page in the gadget html (in the flyout html it didn't work), but the site I'm trying to frame has a frame detector and won't allow it.
You can't change the location of a gadget file to a remote location. There are ways to get it working but I don't remember what they are right now (or if they were fixed in Win 7). There's also a security risk - gadgets run with higher privaleges than web pages so they have access to the clipboard, cross domain web requests and can run unsigned ActiveX controls that are not marked as safe for scripting.
If you're willing to use COM, then you can use the WebBrowser control that comes with windows, with certain limitations. You will only be able to communicate with the original domain the control is loaded with, if the user navigates away from this domain access will be blocked by the same origin policy.
<OBJECT ID="WebBrowser1" WIDTH=332 HEIGHT=276
CLASSID="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2">
<PARAM NAME="ExtentX" VALUE="8784">
<PARAM NAME="ExtentY" VALUE="7303">
<PARAM NAME="ViewMode" VALUE="1">
<PARAM NAME="Offline" VALUE="0">
<PARAM NAME="Silent" VALUE="0">
<PARAM NAME="RegisterAsBrowser" VALUE="0">
<PARAM NAME="RegisterAsDropTarget" VALUE="0">
<PARAM NAME="AutoArrange" VALUE="1">
<PARAM NAME="NoClientEdge" VALUE="1">
<PARAM NAME="AlignLeft" VALUE="0">
</OBJECT>
If you can't live with those limitations, your only option is to create your own ActiveX control that references the WebBrowser control and proxy the commands.
See also, http://support.microsoft.com/kb/176789.