A site I am working on: http://ninthmind.com, looks good remotely in all browsers except Firefox 29.0.1. I have cleared my cached and searched for syntax errors. The weird thing is it looks as expected locally on my machine in the same Firefox browser.
There is a video element within the site that is also not appearing (only remotely in firefox) despite having both mp4 and webm sources. In the code below the class "invis" changes the mask's and the video's display to none for mobile devices.
<div class="header">
<img class="invis" id="mask" src="images/mask.png">
<video class="invis" id="brain" autoplay loop>
<source src="video/brain.mp4" type="video/mp4">
<source src="video/brain.webm" type="video/webm">
</video>
<div class="welcome">
<h1>Welcome to</h1>
<img id="logo" src="images/logo.png" alt="Logo">
<h3>subheading</h3>
</div>
</div>
That webm file is being served with the wrong mime type. It should be "video/webm" but it's being served as "text/plain". You probably have this set up correctly on your local machine (or you're using "file://") but not the remote server.
These instructions should help you:
http://voice.firefallpro.com/2012/03/html5-audio-video-mime-types.html
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 was debugging my web app using DevTools when I noticed that Firefox is requesting url defined in src attribute of an img that is located inside a HTML5 template tag, while Chrome doesn't.
I'm using the last version (50.0).
Is this a bug?
Example below:
<template id="object-img">
<div class='object-container'>
<div>
<img src="cacaca.jpg" class="img-responsive" alt="imagem" />
</div>
</div>
</template>
It's a kind of optimization from Firefox.
The image is requested only the first time if it is not already in the browser's history / cache. Subsequent reload of the page won't trigger the request again.
The problem is that the image inside the <template> is requested before the following but normal images in the rendered DOM, which could be counterproductive in some situations. A solution is to put the <template> after the other images.
Note: the template specifications state that the elements in the template are not rendered, but they are parsed. They say nothing about preloading of referenced resources.
The videos I want to play are in my computer. I have read the forums and guides and I only found guides that lets you play videos uploaded in a video hosting site like JW player and Kaltura. Is there a way to play videos coming directly from my computer? For example by using the path of the file not the link of the uploaded file in the video hosting site. Btw I'm making a youtube like website.
This is my view:
<body>
<div id="container">
<h1>Welcome</h1>
<div id="body">
<div id="div2">
<a href='<?php echo base_url()."main/search"; ?>'>Search!</a>
<br>
<a href='<?php echo base_url()."main/upload"; ?>'>Upload!</a>
<?php echo "<br>"; ?>
<a href='<?php echo base_url()."main/myAccount"; ?>'>Edit my Account!</a>
<?php echo "<br>"; ?>
<a href='<?php echo base_url()."main/logout" ?>'>Logout</a>
</div>
<div id ="searchBox">
<video width="320" height="240" controls >
<source src="videos\53e38a25e298a.mp4" type="video/mp4">
<source src="video\videos\53e38a25e298a.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
</div>
<p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds</p>
</div>
</body>
I'm trying to play a video (specific location for now) from my computer. But it won't play and it just show the player and play button and progress bar.
Update: I'm currently using xampp and codeigniter as the framework.
I tried creating a single webpage placed in my Desktop using the code above and placed the video in my Desktop and it worked. But when I am using codeigniter it does not play. I've tried putting the video clips inside my view folder but still it won't work.
Have a look into HTML5 Video, you can play videos in a similar way to how you would usually add an image from your computer into a website.
http://www.w3schools.com/html/html5_video.asp
I've solved the problem, it seems that the path is indeed incorrect. The correct path is localhost/video/videos/53e38a25e298a.mp4
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.