I am developing a HTML5 game for Facebook. I have the following HTML code:
<audio style="visibility: hidden;" controls="controls" id="sound-0">
<source src="sound/sound_new.ogg" type="audio/ogg"/>
<source src="sound/sound_new.mp3" type="audio/mp3"/>
</audio>
<audio style="visibility: hidden;" controls="controls" id="sound-1">
<source src="sound/sound_new.ogg" type="audio/ogg"/>
<source src="sound/sound_new.mp3" type="audio/mp3"/>
</audio>
<audio style="visibility: hidden;" controls="controls" id="sound-2">
<source src="sound/sound_new.ogg" type="audio/ogg"/>
<source src="sound/sound_new.mp3" type="audio/mp3"/>
</audio>
<audio style="visibility: hidden;" controls="controls" id="sound-3">
<source src="sound/sound_new.ogg" type="audio/ogg"/>
<source src="sound/sound_new.mp3" type="audio/mp3"/>
</audio>
<audio style="visibility: hidden;" controls="controls" id="sound-4">
<source src="sound/sound_new.ogg" type="audio/ogg"/>
<source src="sound/sound_new.mp3" type="audio/mp3"/>
</audio>
<audio style="visibility: hidden;" controls="controls" id="sound-5">
<source src="sound/sound_new.ogg" type="audio/ogg"/>
<source src="sound/sound_new.mp3" type="audio/mp3"/>
</audio>
And the following Javascript that starts the sounds:
if (this.hitFlag > 6) this.hitFlag = 1;
var soundElem = document.getElementById('sound-' + (this.soundFlag % 6) + '0' );
soundElem.play();
Each click of the mouse triggers a sound event. The problem is with Chrome where after dozen of clicks the sounds disappear or start playing with quite a big delay(a dozen of seconds).
But there is no problem when playing in FF or Opera.
It's definitely a bug, but I think it has to do with the actual element and not the sound playing portion. You can easily get around this by preloading your audio, instantiating a new audio object for each playing of a sound, then finally checking the sound objects at each tick to determine whether or not they've finished playing so you can clean up memory.
Preloading is, of course, something like:
var _mySnd = new Audio('my/snd/file/is/here.mp3');
Instantiating is like:
var _sndCollection = [];
var n = _sndCollection.length;
_sndCollection[n] = new Audio();
_sndCollection[n].src = _mySnd.src;
_sndCollection[n].play();
And the cleanup check would be:
for (var i = 0; i < _sndCollection.length; i++)
{
if (_sndCollection[i].currentTime >= _sndCollection[i].duration)
{
_sndCollection.splice(i, 1);
i--;
}
}
I use something like this in my own HTML5 game engine, and it's worked perfectly thus far.
Related
I'm trying get the video in my post's body being autoplayed when the post is opened.
This is what it currerntly looks like:
<video class="wp-video-shortcode" id="video-611-1_html5" width="1080" height="1920" preload="metadata" src="https://jetminister.s3.eu-central-1.amazonaws.com/wp-content/uploads/2020/08/05141345/InVideo___Richard_Branson.mp4?_=1" style="width: 500px; height: 888.889px;"><source type="video/mp4" src="https://jetminister.s3.eu-central-1.amazonaws.com/wp-content/uploads/2020/08/05141345/InVideo___Richard_Branson.mp4?_=1">https://jetminister.s3.eu-central-1.amazonaws.com/wp-content/uploads/2020/08/05141345/InVideo___Richard_Branson.mp4</video>
I tried adding the autoplay using the following:
<script>
(function($) {
$(document).ready(function() {
$(".wp-video-shortcode").prop('loop', 'loop');
$(".wp-video-shortcode").prop('muted', true);
$('.wp-video-shortcode').prop('autoplay', true);
});
})(jQuery);
</script>
But it doesnt do anything. What am I doing wrong?
here's a post example where the video should autoplay.
https://jetminister.epic-cars.be/richard-branson/
Thank you
Thank
You need these attributes to get mute autoplay video : onloadedmetadata="this.muted = true", playsinline, autoplay, muted, loop
<video width="320" height="240" onloadedmetadata="this.muted = true" playsinline autoplay muted loop>
<source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
<source src="https://www.w3schools.com/tags/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Read this:
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
Autoplay only works if you use the mute attrib.
Whever I set
s.loop = true
or with onended event :
s.onended = function()
{
this.currentTime = 0 ;
this.play();
};
it loops a few seconds before the end of the track....
Did anybody here experienced this problem before and found how to fix it ?
(Yes I know webaudio is way better, but it takes ages to decode files on mobiles, so I use it only for short sounds and have to use the nasty old audio element for music.)
If you want to always repeat the audio, and it does not work through Javascript, you can use loop tag in HTML
<audio controls loop>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
I test your code and play complete sound, then repeat the sound
<audio id="Audio" controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
<script>
var s = document.getElementById("Audio");
s.loop = true;
</script>
<script>
var s = document.getElementById("Audio");
s.onended = function(){
this.currentTime = 0 ;
this.play();
}
</script>
As the title suggests, I have audio playing automatically in my site, and some visitors have recommended that I create a pause button for it. After trying numerous online javascript based solutions, I have come out with no success. I use the following code for the audio to play:
<audio id= "song" autoplay loop onloadeddata="setHalfVolume()">
<source src="song.mp3" type="audio/mpeg">
</audio>
Add controls to tag <audio>
example:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
HTML:
<audio controls="controls">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the <code>audio</code> element.
</audio>
Source:/
https://www.w3schools.com/html/html5_audio.asp
https://developer.mozilla.org/en/docs/Web/HTML/Element/audio
Jquery;
$(function(){
$('audio').click(function() {
if (this.paused !== false) {
this.play();
} else {
this.pause();
}
});
});
Html
<!-- add a button to control the audio -->
<button id="btn">Pause</button>
Js
var btn = document.querySelector('#btn'),
songAudio = document.querySelector('#song');
btn.addEventListener('click', function () {
if (songAudio.paused) { // toggle the audio and button
songAudio.play();
btn.textContent = 'Pause';
} else {
songAudio.pause();
btn.textContent = 'Play';
}
}, false);
I am creating a page having a video in background with HTML5.
I want to play the video after it buffered 70%. So that once the user play the video the video should not buffered.
Any one have a solution for this ?
Here is my code for video:
<div class="container">
<video id="video" poster="data:image/gif,AAAA" width="64" height="64" autoplay loop muted="muted" volume="0">
<source src="video/video1.mp4" type="video/mp4">
<source src="video/video1.ogv" type="video/ogv">
<source src="video/video1.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</div>
I have tried some java script also
<button onclick="myFunction()" id="myButtonId" type="button">Get first buffered range</button><br>
<video id="myVideo" width="320" height="176" controls>
<source src="video1.mp4" type="video/mp4">
<source src="video1.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<script>
var vid = document.getElementById("myVideo");
function myFunction() {
alert("Start: " + vid.buffered.start(0) + " End: " + vid.buffered.end(0));
document.getElementById("myButtonId").click();
if(vid.buffered.end(0)>40){
vid.autoplay = true;
vid.load();
}
}
</script>
Thanks in advance !!!!
I have multiple video tags in single screen with absolute position and want to get that longer video from multiple and when longer video ends want to execute code.
<div style="width:1320px;height:1080px;position:absolute;left:0px;top:0px;z-index:0;">
<video preload="auto" autoplay>
<source src="1.mp4" type="video/mp4">
<source src="1.ogv" type="video/ogg">
</video>
</div>
<div style="width:600px;height:1080px;position:absolute;left:1321px;top:0px;z-index:0;">
<video preload="auto" autoplay>
<source src="2.mp4" type="video/mp4">
<source src="2.ogv" type="video/ogg">
</video>
</div>
<div style="width:1000px;height:600px;position:absolute;left:200px;top:200px;z-index:5;">
<video preload="auto" autoplay>
<source src="3.mp4" type="video/mp4">
<source src="3.ogv" type="video/ogg">
</video>
</div>
How can i do it?
Thanks,
Bhumi
So, if I understand it well, you have multiple videos on one page, and when the longest one ends playing, you want to execute code?
Then you'd do this:
$(document).ready(function() {
var longestVid = "";
$("video").each(function() {
if (longestVid == "" || longestVid.duration < this.duration)
longestVid = this;
});
//To loop all others:
$("video").not($(longestVid)).attr("loop","loop");
$(longestVid).on("ended",function() {
//This code will execute when the longest video on the page ends playing.
});
});