document.getElementById('audio_1').addEventListener('ended', function() {
this.play();
this.currentTime = 0;
}, false);
In this music does not start on page load, it repeats n number of times, once started..but not once page load
You never start the playback. You need to call .play() onload or use the autoplay attribute in your <audio> tag.
Oh, and you can achieve looping much easier without any JavaScript. Simply use the loop attribute in your <audio> tag.
Related
I am using a Javascript code to detect if a video is loaded.
Once it is loaded I want to add an autoplay attribute to the <video> tag to make it play but I can't find a way to add that attribute. Here is the code I use:
window.addEventListener('load', function() {
var video = document.querySelector('#bgvid');
var div = document.getElementById('#bgvid');
function checkLoad() {
if (video.readyState === 4) {
alert('video is loaded')
video.setAttribute("autoplay")
} else {
setTimeout(checkLoad, 100);
}
}
checkLoad();
}, false);
******************* THE SOLUTION ********************
First, thanks DontVoteMeDown for the help.
Proper code should be:
document.getElementById('bgvid').addEventListener('canplaythrough', function() {
this.play();
});
Why not add the attribute to the tag? From the docs:
autoplay: (...) the video will automatically begin to play back as soon as it can do so without stopping to finish loading the data.
So I presume (not sure, indeed) that the video will start playing as soon it loads a part of the video.
Anyway, if you still want to add the attribute, the video tag has some Events, from docs:
canplay: Sent when enough data is available that the media can be played, at least for a couple of frames;
canplaythrough: Sent when the ready state changes to CAN_PLAY_THROUGH, indicating that the entire media can be played without interruption(...);
So you can use one of those events to set the attribute, e.g:
document.getElementById('bgvid').addEventListener('canplay', function() {
this.setAttribute("autoplay", "autoplay");
});
With this you can avoid using timeouts, which isn't the best approach.
with autoplay enabled there is no need to check its load state, the video will simply play when it can, is loaded.
video.autoplay = true;
Look here
I am trying to make a href to pause play the HTML 5 video with javascript but i has not yet succeded this is my html:
play-pause
<video poster="bg.jpg" loop id="bg-vid"></video>
and this is my javascript (I have no to very little experience with javascript so this was my guess on how it would look but it did not work)
$(".play-pause").click, '#bg-vid'(function(e){
var video = $(this).get(0);
if (video.paused === false) {
video.pause();
} else {
video.play();
}
return false;
});
Unless you're going to have a single pause button that controls multiple videos, you should probably change play-pause from a class to an id:
play-pause
Also, I'd declare the click handler inside the a tag as well, rather than assigning it at runtime:
play-pause
Then, in the js, define a function called playpause() that calls $('#bg-vid').pause() or $('#bg-vid').play() as appropriate.
The following javascript function serves and autoplays a audio file (via a HTML 5 audio tag), cuts the mp3 playback at 6 seconds and loops + autoplays the audio from the beginning.
javascript:
function updateaudio() {
var a_str = '<audio autoplay source src="audio/coolsound.mp3" type="audio/mpeg"></audio>';
document.getElementById('audio_span').innerHTML = a_str;
}
setInterval(updateaudio, 6000)
html:
<div><span id="audio_span"></span><script src="js/audio.js"></script></div>
Is there any using the html5 audio attribute to set autoplay playback to once off i.e. non-looping? Alternatively, is there another way to achieve this (via either javascript or html5)? Upon the audio event ending, I would like to set a flag and stop any playback.
Don't use setInterval() if you don't want a loop.
If you simply want to pause the playback after six seconds do:
setTimeout( function () {
document.getElementById('audio_span').pause();
}, 6000)):
I am attempting to build a video sequencer that is capable of playing back a list of video URLs seamlessly in series. There cannot be a gap between the videos; the playback needs to be as close to frame-accurate as possible.
Attempt #1
I used a fairly obvious and straightforward approach, similar to that mentioned in this thread.
HTML 5 video or audio playlist
The issue with this approach was that each time one video ended and the subsequent video was specified as the new source, that new video still needed to load, resulting in a potentially long gap. If it is possible to force all the videos to preload even before they are named in video.src, this approach could still potentially work.
Attempt #2
I rewrote the script so each video in the list would result in a separate video element being created, but not attached to the document (using createElement). Then as each video ended, I removed the previous node and appended the next element.
Code executed on page load:
for (i in timelinePlay)
if (timelinePlay[i] != null)
{
var element = document.createElement('video');
element.id = 'video1-' + (i);
element.src = timelinePlay[i]['URL'];
element.preload = 'load';
video1Array[i] = element;
}
Code for video 'ended' event:
videoElement.addEventListener("ended", function (event) {
if (this.currentTime > 0)
{
if (player.hasChildNodes())
while (player.childNodes.length > 0)
player.removeChild(player.firstChild);
player = document.getElementById('canvas-player');
player.appendChild(video1Array[timelineCurrent]);
nextVideo = document.getElementById('video1-' + timelineCurrent);
nextVideo.play();
timelineCurrent++;
}
}, false);
(Note that these code examples are partial and somewhat simplified. Also, I do realize that my use of Objects as Associative Arrays is not best practice)
The result of this modification was MUCH closer, because the videos were now loaded by the time they were required to play, but there was still a short and inconsistent gap between the videos.
Attempt #3
I replaced the 'ended' event listener with a 'timeupdate' listener, beginning as follows:
nextVideo.addEventListener("timeupdate", function (event)
{
if (this.currentTime > (this.duration - 0.1) && this.currentTime > 1)
{
this.removeEventListener("timeupdate", function () { return; }, false);
('this.currentTime > 1' is simply to ensure that the previous video actually plays)
My hope was that the gap between videos was close enough to being consistent that starting the next video an arbitrary 0.1 seconds before the previous video ended would correct the gap to an acceptable extent. The result was that the timing was indeed better, but it was skipping videos. I attribute the skipped videos to misfiring of the 'timeupdate' event, but I could be mistaken.
Other alternative options I had also considered:
SMIL Script (seems to be obsolete, and would likely have the same syncing issues anyway)
ffmpeg on the backend to concatenate the videos (my host will not allow shell scripts)
FYI I am developing for Safari 5.0.3 at the moment
I had a similar problem that I managed to solve now thanks to your hints. The result is a possibly dynamic list of video elements that may be played back one after another without gaps.
Instead of a native Video Tag I use jwplayer on several video elements.
On startup all elements begin to play one second, are paused and rewound to zero.
Then one by another is played and made visible with display: block.
<ul class="playlist">
<li>
<video class="playlist" id="vid01" poster="img/preview.jpg">
<source src="vid/v01.mp4" type="video/mp4">
</video>
</li>
<li>
<video class="playlist" id="vid02" poster="img/preview.jpg">
<source src="vid/v02.mp4" type="video/mp4">
</video>
</li>
<li>
<video class="playlist" id="vid03" poster="img/preview.jpg">
<source src="vid/v03.mp4" type="video/mp4">
</video>
</li>
<li>
<video class="playlist" id="vid04" poster="img/preview.jpg">
<source src="vid/v04.mp4" type="video/mp4">
</video>
</li>
</ul>
On added to stage, 'preload' the video one or two seconds:
(Excerpt)
var isPrebuffering = false,
isSeeking = false;
$player = jwplayer(videoId).setup({
width: '800px',
height: '450px',
autoplay: false,
modes: [
{ type: 'html5' }
],
events: {
onReady: function(e) {
prebuffer();
},
// There is a quirk in jwplayer that makes it impossible to pause at the
// new position directly after seeking. So we have to work around that.
onTime: function(e) {
if((e.position > 1.0 && isPrebuffering) || isSeeking) {
finishPrebuffering();
}
}
}
});
function prebuffer() {
isPrebuffering = true;
$player.setMute(true);
$player.play();
};
function finishPrebuffering() {
if(isPrebuffering) {
isPrebuffering = false;
isSeeking = true;
$player.seek(0);
}
if($player.getPosition() === 0) {
isSeeking = false;
$player.pause();
$player.setMute(false);
}
};
The mediaElement interface of HTML5 can be quite confusing sometimes between preload, load and buffered.
But have you tried to put an event on your video to detect for example 3 seconds before the end of your video ?
Then in ajax try to load the next video in a new div.
On the ended event of your video you could switch the div, so your next video will be enough loaded to be played.
And so on for the next videos.
http://www.w3.org/TR/html5/video.html#media-elements
You might be able to do so with http://popcornjs.org/. They provide js hooks, on a frame by frame level into the video using html5 video tag. There are a lot of events etc.
I have multiple video plays on a single page which I need to listen for onplay and onpause triggers, and execute custom functions which take the IDs from each of the videos tags. I need to be able to get the video id that was activated. Ive tried a few different ways, with the simple vid.onplay event works well when I know what ID is being called into. I've tried the $("video").onplay but doesn't seem to be working.
jQuery( document ).ready(function($) {
$("video").onplay = function() {
alert("The video has been paused");
};
var vid = document.getElementbyid("myVideo");
vid.onplay = function() {
alert("The video has been played");
};
});
<video class="mdia_video_player" id=myVideo poster="https://tcokchallenge.com/launch2/wp-content/uploads/2020/04/Carter.jpg?336660464" id="v0" onclick="doplayvideo(" 0")"="" controls="">
<source src="https://tcokchallenge.com/launch2/wp-content/uploads/2020/04/Carter.mp4?1222152426" type="video/mp4">
</video>```
In your first demo, it should be $("#video") to call by ID. It also says .onplay and then says that is was paused so you might want to fix that.
Ended up doing a much simpler answer, videos are within a php loop. So, I placed this within the tag
onpause="dopausevideo(<?=$vid ?>)"
onplay="doplayvideo(<?=$vid ?>)"