I am trying to stream video file on web. my server is httpd 2.2 runnin gon centos 5 64 bit. So far it has worked well with ie9, chrome, opera but I have issues with firefox. I cannot rely on a user to have certain plugins installed. I want the video to be able to play in html5 if not supported then roll onto flash. The following is the current code that I have.
<!DOCTYPE html>
<html>
<head>
<SCRIPT type="text/javascript" src="jquery-1.7.2.min.js"></SCRIPT>
<SCRIPT type="text/javascript" src="modernizr.custom.13466.js"></SCRIPT>
<script type="text/javascript" src="excanvas.js"></script>
<script type="text/javascript">
function supports_canvas() {
return !!document.createElement('canvas').getContext;
}
function supports_video() {
console.log("supports video");
console.log(document.createElement('video').canPlayType);
return !!document.createElement('video').canPlayType;
}
function supports_h264_baseline_video() {
if (!supports_video()) { return false; }
var v = document.createElement("video");
return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
}
function supports_ogg_theora_video() {
if (!supports_video()) { return false; }
var v = document.createElement("video");
return v.canPlayType('video/ogg; codecs="theora, vorbis"');
}
function supports_webm_video() {
if (!supports_video()) { return false; }
var v = document.createElement("video");
return v.canPlayType('video/webm; codecs="vp8, vorbis"');
}
</script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
/*console.log("document ready");
if ( !supports_video() ) {
console.log("false");
return false;
}
*/
if (Modernizr.canvas) {
// let's draw some shapes!
} else {
// no native canvas support available :(
}
});
</script>
<!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise -->
<!-- warning: playback does not work on iOS3 if you include the poster attribute! fixed in iOS4.0 -->
<video width="640" height="360" controls>
<!-- MP4 must be first for iPad! -->
<source src="movie.mp4" type="video/mp4" />
<!-- Safari / iOS video
<source src="movie.ogv" type="video/ogg" />-->
<!-- Firefox / Opera / Chrome10 -->
<!-- fallback to Flash: -->
<object width="640" height="360" type="application/x-shockwave-flash"
data="movie.swf">
<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
<param name="movie" value="movie.swf" />
<param name="flashvars"
value="controlbar=over&image=movie.jpg&file=movie.mp4" />
<!-- fallback image. note the title field below, put the title of the video there -->
<img src="movie.jpg" width="640" height="360" alt="__TITLE__"
title="No video playback capabilities" />
</object>
</video>
<!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want
<p>
<strong>Download Video:</strong> Closed Format: "MP4" Open Format: "Ogg"
</p>-->
</body>
</html>
I have placed the following in .htaccess file and httpd conf
AddType video/mp4 mp4
AddType video/ogg ogg
AddType video/webm webm
I have also loaded the following into httpd
AddHandler h264-streaming.extensions .mp4
LoadModule h264_streaming_module /usr/lib64/httpd/modules/mod_h264_streaming.so
Message in firefox i get is: firefox no video with supported format
Any suggestions?
Firefox doesn't support MP4. If a browser supports HTML5 video, it will look for a file it can play. If it can't find one, it does not then fall back to the Flash version automatically, so for Firefox (and Opera - which also doesn't support MP4), you'll need to also provide a WebM format (and Ogg if you want to support Firefox 3.6).
Related
I'm creating a server for streaming videos. I use nginx and rtmp module.
But when I play video in my web, it works fine with Chrome and edge but Firefox is'nt.
Firefox shows this and I don't know why:
Here is my html file:
<video width="640" height="360" id="player1">
<source type="video/rtmp" src="rtmp://myserver:myport/livestreaming/live" />
<source type="application/x-mpegURL" src="http://myserver/livestreaming/live/index.m3u8" />
</video>
<script type="text/javascript" src="lib/demo/hls_streams.js"></script>
<script type="text/javascript">
function loadStream(url) {
$('video')[0].player.setSrc(url);
$('video')[0].player.play();
}
</script>
<script>
$('video').mediaelementplayer({
success: function(media, node, player) {
$('#' + node.id + '-mode').html('mode: ' + media.pluginType);
}
});
</script>
Can someone help me with this problem?
<video width="352" height="198" controls>
<source src="video.m3u8" type="application/x-mpegURL">
</video>
This code works fine with all browsers on my android device but doesn't works on Firefox / Chrome / Safari on my computer.
I need to play the video on all devices. What can I do?
HLS is not supported on most browsers natively. But can be played via libraries such as hls.js.
this should easily work
<script src="https://cdn.jsdelivr.net/npm/hls.js#latest"></script>
<video id="video"></video>
<script>
if(Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls();
hls.loadSource('https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
}
</script>
In the HTML5 spec, it suggests you put fallback material in the <video> tag for older browsers that do not support it.
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
However, I cannot find anything for fallbacks when all source types are unsupported. For instance, my Chromium browser cannot play video/mp4, but it can play video/ogg. So I would expect this to render the fallback text.
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Instead, I just get a video player with nothing in it because it can't load the mp4 file.
Is there a way to have a fallback in HTML 5 video when there is no usable video source? I am aware that the fallback I was attempting is only for old browsers, but I still need a fallback for no available source.
Actually, when you try to load unsupported media types in <source> element, an error event will fire.
You could then listen to these events, and if none of the sources is recognized, trigger the fallback :
var sources = document.querySelectorAll('source');
var source_errors = 0;
for (var i = 0; i < sources.length; i++) {
sources[i].addEventListener('error', function(e) {
if (++source_errors >= sources.length)
fallBack();
});
}
function fallBack() {
document.body.removeChild(document.querySelector('video'));
document.body.appendChild(document.createTextNode('No video with supported media and MIME type found'));
}
<video controls>
<source src="foo.bar" type="video/foo" />
<source src="bar.foo" type="video/bar" />
</video>
It's mentioned in the specs a way to fallback.
"listen to the error event on the last source element and trigger fallback behavior"
<div>
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg"
onerror="parentNode.parentElement.innerText = 'Your browser does not support the video codec' ">
</video>
</div>
There's no HTML behaviour for this, so we'll have to add our own behaviour with JavaScript.
(function() {
"use strict";
function insertAfter(newNode, referenceNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
function setVideoFallback(lazyArea) {
var lowData = false;
if ("connection" in navigator) {
lowData = navigator.connection.saveData === true ||
navigator.connection.effectiveType === "slow-2g" ||
navigator.connection.effectiveType === "2g";
}
//DocumentFragments don't support getElementsByTagName
//oldIE doesn't support querySelectorAll
var lazyVideos = lazyArea.querySelectorAll ?
lazyArea.querySelectorAll("video") :
lazyArea.getElementsByTagName("video");
for (var i = lazyVideos.length; i--;) {
var lazyVideo = lazyVideos[i];
var cantPlay = true;
if (lazyVideo.canPlayType) {
//Loop through the various source elements, and check if
//the browser thinks it can play them
//This works better if we specify the codec along with
//the MIME type
var sources = lazyVideo.getElementsByTagName("source");
for (var i2 = sources.length; i2--;) {
if (lazyVideo.canPlayType(sources[i2].type)) {
cantPlay = false;
break;
}
}
}
//If on a low-data connection, remove the autoplay attribute
//(it's only polite)
if (lowData) {
lazyVideo.removeAttribute("autoplay");
lazyVideo.setAttribute("controls", "");
}
//If you can't play any of the available formats, skip straight to fallback content
if (cantPlay) {
//Extract the fallback and replace the video with it
var children = lazyVideo.childNodes;
for (var i3 = children.length; i3--;) {
var childNode = children[i3];
if (childNode.tagName !== "TRACK" && childNode.tagName !== "SOURCE") {
insertAfter(childNode, lazyVideo);
}
}
lazyVideo.parentNode.removeChild(lazyVideo);
}
}
}
/**
* Retrieve the elements from the 'lazy load' noscript tags and prepare them for display
*/
function setUp() {
//Get all the noscript tags on the page
var lazyLoadAreas = document.getElementsByTagName("noscript");
var supportsTemplates = typeof HTMLTemplateElement === "function";
for (var i = lazyLoadAreas.length; i--;) {
var noScriptTag = lazyLoadAreas[i];
//only process the ones marked for lazy loading
if (!noScriptTag.hasAttribute("data-lazy-load")) continue;
// The contents of a noscript tag are treated as text to JavaScript
var lazyAreaHtml = noScriptTag.textContent || noScriptTag.innerHTML;
// So we stick them in the innerHTML of a new div tag to 'load' them
var lazyArea;
if (supportsTemplates) {
//(if possible, templates are better as they won't start any network calls)
var lazyTemplate = document.createElement("template");
lazyTemplate.innerHTML = lazyAreaHtml;
lazyArea = lazyTemplate.content;
} else {
lazyArea = document.createElement("div");
lazyArea.innerHTML = lazyAreaHtml;
}
setVideoFallback(lazyArea);
noScriptTag.parentNode.replaceChild(lazyArea, noScriptTag);
}
}
//If the page has loaded already, run setup - if it hasn't, run as soon as it has.
if (document.readyState !== "loading") {
setUp();
} else {
document.addEventListener("DOMContentLoaded", setUp);
}
})();
<main>
<figure>
<!--[if !IE]><!-->
<noscript data-lazy-load>
<video height="338" width="600" autoplay loop muted>
<!--<source src="./Sample.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">-->
<source src="http://dl3.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm; codecs=vp8,vorbis">
<source src="https://upload.wikimedia.org/wikipedia/commons/0/07/Backgammon_example.ogv" type="video/ogg; codecs=theora,vorbis">
<!--<![endif]-->
<img src="https://media2.giphy.com/media/BfbUe877N4xsUhpcPc/giphy.gif?cid=790b76115cadcffa59306b73776453f3" height="360" width="480"/>
<!--[if !IE]><!-->
</video>
</noscript>
<!--<![endif]-->
<figcaption>
A bunny emerging from his den and stretching.
<!--[if !IE]><!-->
<noscript aria-hidden="true"><p>
Note: Without JavaScript, the above animation might not play. In that case, the animation can be directly accessed
here.
</p></noscript>
<!--<![endif]-->
</figcaption>
</figure>
</main>
Using the canPlayType function, we ask the browser if it thinks it can play any of the source types. If it doesn't, we pull out the fallback content.
We encase the video in noscript tags so that it won't start loading until we've run the script (unless scripting is disabled, which is the desired behaviour).
We also use IE conditional tags, because oldIE can't read the contents of noscript tags with script.
(Tested with Edge, Firefox, Chrome, and every compatibility mode IE has. The Webm shows in all browers bar IE, which shows the GIF in every compatibility mode.)
#Jaw.sh There's two fallback options that are commonly in use.
Fallback to Flash version of the video.
Fallback to a direct download of the video.
Today's browsers (Opera I'm not sure and not really concerned), are all capable of playing MP4 H.264. So you shouldn't worry too much about incompatibilities, unless most of your viewers live in China.
I am new to run a .flv file. I used a tutorial for this. The link of the tutorialhttp://www.fieg.nl/embed-html5-video-with-flash-fallback#file-index.html
Here the video file is repeating time to time. I think it is in a loop. How can the video file run once when open the window. The code for run the flv file is below.
<script type="text/javascript">
jQuery(document).ready(function() {
var v = document.createElement("video"); // Check if the browser supports the video tag
if ( !v.play ) { // If no, use Flash.
var params = {
allowfullscreen: "false",
allowscriptaccess: "always",
wmode: "transparent"
};
var flashvars = {
src: "demo.flv"
};
swfobject.embedSWF("http://localhost/TantraProjects/Ranjit/html5/demo_flv.SWF", "demo-video-flash", "270", "296", "9.0.0", "http://localhost/TantraProjects/Ranjit/html5/expressInstall.swf", flashvars, params);
}
else {
// fix for firefox not looping
var myVideo = document.getElementById('demo-video');
if ((typeof myVideo.loop == 'boolean')) { // loop supported
myVideo.addEventListener('ended', function () {
this.currentTime = 0;
this.play();
}, false);
}
}
});
</script>
Please help me to know more about it.
Hi i have got the same thing for the video. There is a loop in the video and i dont want to looping the video.My html for the code.
<div id="demo-video-flash"><!-- wrapped in a div for the flash fallback -->
<video id="demo-video" height="155" width="270" autoplay loop>
<source src="http://localhost/TantraProjects/Ranjit/html5/demo.mp4" type="video/mp4" /> <!-- MPEG4 for Safari -->
<source src="http://localhost/TantraProjects/Ranjit/html5/demo.ogv" type="video/ogg" /> <!-- Ogg Theora for Firefox 3.1b2 -->
<!-- this is the image fallback in case flash is not support either -->
<img src="http://localhost/TantraProjects/Ranjit/html5/demoo.png"/>
</video>
</div>
It looks like you are using JW Player, correct? Then you should add repeat: none to the flashvars so it would look something like this.
var flashvars = {
src: "demo.flv",
repeat: "none"
};
More details on the 'flashvars' params over here.
I would like to use the html5 video tag only if the users browser is Safari, and if it is not, use a flash video player.
The code below does not work (<!--[if Safari]> conditional is not valid), but it may give you an idea of what i am looking for
<!--[if Safari]>
<video id="player" width="480" controls>
<source src="path/to/movie.mov" />
</video>
<![endif]-->
<!--[if !Safari]>
<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {
allowscriptaccess: "true",
file:"path/to/movie.mov"
};
var attributes = {};
swfobject.embedSWF("swf/player.swf", "player", "640", "480", "9.0.0", flashvars, params, attributes);
</script>
<![endif]-->
Never use browser detection. Use feature detection instead. You can use Modernizr for that, but in this case, you don't need any JavaScript at all to fallback to Flash if the browser doesn't support HTML5's <video> element.
See this article at Nettuts+.