I am making an audio site for fun, but I find it that the loop property to the audio tag doesnt work in firefox. I also know that conditional statements only work for IE, is there another way to accomplish the same goal?
<![if firefox]>
<script src="script.js"></script>
<![endif]>
EDIT: This is my current HTML code.
<audio id="song_1" name="audio" autobuffer loop>
<source src="song.ogg" />
<source src="song.mp3" />
<source src="song.wav" />
<div class="white_text">Your browser does not support the audio file formats or does not support HTML5.</div>
</audio>
<audio id="song_2" name="audio" autobuffer loop>
<source src="song2.ogg" />
<source src="song2.mp3" />
<source src="song2.wav" />
</audio>
<audio id="song_3" name="audio" autobuffer loop>
<source src="song3.ogg" />
<source src="song3.mp3" />
<source src="song3.wav" />
</audio>
<audio id="song_4" name="audio" autobuffer loop>
<source src="song4.ogg" />
<source src="song4.mp3" />
<source src="song4.wav" />
</audio>
<script>
var music = document.getElementsByName('audio'), i;
for (i = 0; i < n; ++i)
music[i].addEventListener('ended', function(){this.currentTime = 0;}, false);
</script>
Problem with this is that when 'loop' is added to audio tag, firefox wont loop. When 'loop' is not there, safari (or at least safari mobile, cuz thats what i have) wont loop.
You shouldn't test if the browser is Firefox but if the browser supports a feature. Also, I recommend to read: http://forestmist.org/2010/04/html5-audio-loops/ HTML5 audio loops are bad right now.
Edit:
You can try this: https://stackoverflow.com/a/6452884/259517
You can just check in JS what browser the user is using.
<script type="text/javascript">
if(navigator.appName == "Netscape") {
// it's Firefox.. do sth..
}
</script>
These are called conditional comments.
Per Conditional Comments Firefox:
No, they are only supported by IE.
There are CSS hacks though. See: http://perishablepress.com/press/2009/06/28/css-hacks-for-different-versions-of-firefox/
EDIT: Removed note per comment below. See above.
Related
I am trying to make a website where I have multiple videos on it. When I run the code, only the first video loads. No matter what I do, the second video will not play or load. Why doesn't my second video load?
Here's my code:
<html>
<head>
<title>Andrew soundboard!</title>
<style>
h1{
text-align:center;
}
</style>
</head>
<body>
<h1>Andrew Soundboard!</h1>
<br>
<video width="320" height="240" controls="controls" autobuffer>
<source src="IMG_3558.mp4" type="video/mp4">
<object data="" width="320" height="240">
<embed width="320" height="240" src="IMG_3558.mp4">
</object>
</video>
<br>
FREAK OUT #1
<br><br>
<video width="320" height="240" controls="controls" autobuffer>
<source src="IMG_3559.mp4" type="video/mp4">
<object data="" width="320" height="240">
<embed width="320" height="240" src="IMG_3559.mp4">
</object>
</video>
<br>
STOP IT!
</body>
</html>
There doesn't appear to be anything wrong with your code. So the possible issues are:
Is your video on your server (or if running on computer, in an accessible folder)?
Are you linking to your video correctly (in the right file, etc.)?
Does your video have the exact same file name as your HTML?
Does your video have the EXACT same file extension as your HTML? (.mp4, .mov, etc.)
Hope this helped!
Straightforward HTML5 video tag with several video types, but only the poster displays in Mac/Safari. What am I missing?
<video poster="~/images/image.jpg" preload="none">
<source src="myvideo.mp4" type="video/mp4" />
<source src="myvideo.webm" type="video/webm" />
<source src="myvideo.ogv" type="video/ogg" />
</video>
UPDATE - I know the tag is missing autoplay, but this is stuck in after the fact using JQuery. "viewport" is my variable that knows pixel width of the browser window.
if (viewport >= 768 && $(".videoInline video")[0]) {
$(".videoInline video")[0].load();
$(".videoInline video")[0].autoplay = true;
$(".videoInline video")[0].loop = true;
$(".videoInline video").get(0).play();
}
UPDATE 2 - to clarify, this is NOT iOS, it is Mac/Safari as stated above. So, desktop only.
I think you are missing the autoplay attribute:
<video controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
I have a web page where the top of the page is a fullscreen div with a background of a video. I also have, further down the page another video (for testing purposes the same video).
I have an interesting scenario to figure out...
Video 1 (at the top of the page) works perfectly on Firefox, Safari, Chrome, IE
Video 2 (half way down the page) works great on Firefox, Safari and IE. NOT Chrome
Due to the nature of my job I have to ensure that the websites I develop are browser safe. Does anyone know why 1 video would be working in Chrome but the other won't?
AT TOP OF PAGE
<video id="video" poster="img/poster.png" loop muted class="video-js vjs-default-skin" preload="none" width="100%" height="100%" data-setup="{}">
<source src='img/video.mp4' type="video/mp4"/>
</video>
HALF WAY DOWN PAGE
<video id="s-video" poster="img/poster.png" loop muted class="bg_video video-js vjs-default-skin" preload="none" width="100%" height="100%" data-setup="{}">
<source src="img/video.mp4" type="video/mp4" />
</video>
I also have this bit of DOM Javascript at the bottom of my page
<script>
document.getElementById('video').play();
document.getElementById('s-video').play();
</script>
I would guess (as there is not so much info here) there is a problem with the data being ready soon enough when play() is executed.
You could try to change the following things:
I the tags themselves, change preload to use auto
In the JavaScript, add listeners to the elements for the canplay event
Example:
<video id="video" poster="img/poster.png" loop muted class="video-js vjs-default-skin" preload="auto" width="100%" height="100%" data-setup="{}">
<source src='img/video.mp4' type="video/mp4"/>
</video>
<video id="s-video" poster="img/poster.png" loop muted class="bg_video video-js vjs-default-skin" preload="auto" width="100%" height="100%" data-setup="{}">
<source src="img/video.mp4" type="video/mp4" />
</video>
and
<script>
var video1 = document.getElementById('video');
var video2 = document.getElementById('s-video');
video1.addEventListener("canplay", start);
video2.addEventListener("canplay", start);
function start() {this.play()}; // "this" = current element calling
</script>
Update
This could also work if you want to have preload set to none:
<script>
var video1 = document.getElementById('video');
var video2 = document.getElementById('s-video');
video1.addEventListener("canplay", start);
video2.addEventListener("canplay", start);
function start() {this.play()}; // "this" = current element calling
video1.load(); // start loading video (metadata + data)
video2.load();
</script>
I'm facing this problem with skrollr: everything goes fine, then when adding a video, it continues playing if out of viewport, even if the div has a display:none declaration. I tried searching here and Google but couldn't find anything and at this point I'm really lost.
For reference, this is the code I'm using:
<div id="seventh" class="view" data-0="display:none;top:0%;" data-27000="display:block;opacity:0;" data-29000="opacity:1;" data-32000="opacity:0;" >
<video id="video" class="video-js vjs-default-skin" controls preload="none" width="1223" height="611" poster="img/poster.jpg" data-setup="{}">
<source src="videos/vid.webm" type='video/webm' />
<source src="videos/vid.mp4" type='video/mp4' />
</video>
</div>
any help on how to achieve this really appreciated
Use
skrollr.init({
render: function(data) {
//get current element opacity and position then play or pause the video
}
});
See http://jsfiddle.net/ybP6b/ for a working example
I use a code to play background music on my website..
<embed src="1.wav" autostart="true" loop="true"
width="2" height="0">
</embed>
But this code does not play infinite looped music..
Once the sound track gets over it does no repeat..
What should i do to repeat the music again and again..
This is what I have found to work the best... Just replace the 'yoursounds' with the actual file name of your chosing.
<audio autoplay loop controls>
<source src="yoursound.ogg">
<source src="yoursound.mp3">
</audio>
The HTML5 solution is the Audio tag http://www.w3schools.com/tags/tag_audio.asp
This is the older solution: http://drayblog.gotdns.com/index.php/2009/05/13/html-embed-an-audio-clip-and-repeat-loop-it/
<EMBED SRC="/audio/media.mp3" AUTOSTART="true" HIDDEN="True" LOOP="True"/>
<NOEMBED>
<object type="audio/mp3" data="http://www.domain.com/audio/media.mp3"><param name="src" value="http://www.domain.com/audio/media.mp3"></param><param name="autostart" value="true"></param><param name="hidden" value="True"></param><param name="loop" value="true"></param>
</object>
</NOEMBED>
Instead of loop='true' try with loop='infinite' as below
<embed src="1.wav" autostart="true" loop="infinite"
width="2" height="0">
</embed>
Try jPlayer. It's an html5 media player that will fallback on flash. Here's an example from one of the demos:
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4a:"http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a",
oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
});
},
swfPath: "../js",
solution: "flash, html",
supplied: "m4a, oga",
wmode: "window"
});
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
http://jplayer.org/latest/demo-01-solution-flash-html/
Try using the audio tag instead:
<audio autoplay loop>
<source src="sound.ogg">
<source src="sound.mp3">
</audio>
You need to use both mp3 and ogg files to be able to play your sound correctly in all browsers. Firefox for instance does not support mp3 files. Also using .wav is on websites is severely frowned upon due to its size.
<audio hidden="true" autoplay loop controls>
<source src="source.mp3">
</audio>
it will works fine as you want...