I've tried several solutions. Both work in Safari, but Chrome stops the audio after playing the file through. Before this there is the getNewAudioFileFunction - which fetches a file from an API, and plays it.
So I want to detect when the audio file is finished, and upon the audio.ended I want to retriever the getNewAudioFileFunction. What is it that I don't get here?
audio.onended = function() {
console.log('Audio Ended');
getNewAudioFileFunction();
}
and:
if (audio.play(audio)) {
audio.addEventListener('ended', function() {
console.log(audio.currentTime);
console.log('audio ended');
getNewAudioFileFunction();
});
Related
I have a simple site with an HLS stream from a m3u8 playlist in an autoplay video tag. If the stream stops for more than 10s or so it will not "catch up" and start again when the stream is restarted - I need to manually refresh the page to get it to play again.
Is there a way with js (or something else) to automatically refresh the page after the video has been buffering for X time? (say 5 seconds)
I managed to get this with some help from VC.One's answer. This will reload after the video has been buffering for 5 seconds, if the video was previously playing. Otherwise it will be stuck in a reload loop if it never starts playing. I am still looking for a way to check whether the stream is live without actually reloading the page. video.load() and video.play() are giving me errors, but I will update this post when I figure it out.
var reloadCheck;
var reloadThisTime;
var video = document.getElementById("videotag");
var sourcetag = document.getElementById("sourcetag");
video.addEventListener('waiting', (event) => {
console.log("No connection");
reloadCheck = setTimeout(function(){
if(reloadThisTime){
location = '';
};
},5000);
});
video.addEventListener('playing', (event) => {
console.log("Connected");
clearTimeout(reloadCheck);
reloadThisTime = true;
});
I have a mp4 video inside html video tag. SRC= is given for the google drive video.
see my code below
<video auto play muted loop id="video" class="" src="https://drive.google.com/uc?export=download&id=1qSC6ySf6ZZldFRpuBx9EXvDsD-mfve1Z" type="video/mp4"> </video>
Note: when I am directly calling mp4 video from my server than it will not pause but when the video is called from google drive it gets paused after few minutes. As I am not showing any controls. I need the video to be played continuously.
the issues I'm getting is
Codepen link: https://codepen.io/5salman/pen/bGRMyKj
There's nothing inherit in Google Drive (that I can think of) that would cancel autoplay. More likely you're hitting an error event. The video will be loaded via "206 Partial Content" byte-range requests. If it doesn't end up being locally cached then that could make it more susceptible to network issues than on a server that doesn't support byte-range requests. Also consider looking at the network Devtools for any network errors.
Mitigation options:
Reduce the size of your video! It's 14mb for 20 seconds of video. Use Handbrake or something to re-encode the video to a smaller bitrate/size. That will reduce network traffic and make it less likely to choke the viewing device.
Add an error event handler on the <video> tag - this can help you with diagnostics, and you can also trigger the video to (try) to play again.
function reloadVideo(vidElement, preserveTime = true) {
if (preserveTime) {
// wait to set the current time again until after playable
const position = vidElement.currentTime;
var cb = vidElement.addEventListener('canplay', () => {
if (!isNaN(position) && position < vidElement.duration) {
// I recommend seeking just a frame or so ahead, just in case there was a decode error on the video
vidElement.currentTime = position + 1/30;
}
vidElement.removeEventListener('canplay', cb);
});
}
const src = vidElement.currentSrc;
vidElement.src = "";
vidElement.src = src;
}
var vidElement = document.querySelector('#video');
// retry on error
var retryErrorCodes = [MediaError.MEDIA_ERR_NETWORK, MediaError.MEDIA_ERR_DECODE];
var SECONDS_BEFORE_RETRY = 5;
vidElement.addEventListener('error', evt => {
if (retryErrorCodes.includes(vidElement.error.code)) {
setTimeout(reloadVideo, SECONDS_BEFORE_RETRY * 1000, vidElement);
}
}
(Not Recommended) if you need it to keep running you can add a setInterval function that restarts the video if it's paused. Keep in mind that these "zombie" functions can get annoying if you don't manage them carefully.
// use setInterval to keep retrying the playback
var SECONDS_BETWEEN_PLAYING_CHECKS = 10;
var keepPlayingTimer = setInterval(function () {
var vidElement = document.querySelector('#video');
// make sure the element is still there
if (vidElement && typeof vidElement.play === 'function') {
// if it's not playing start it playing again
if (vidElement.paused) {
vidElement.play();
}
} else {
// don't call this function again if video element is gone
clearInterval(keepPlayingTimer);
}
}, SECONDS_BETWEEN_PLAYING_CHECKS * 1000);
I have a situation where I'm trying to load JSON data into a popup using AngularJS and Bootstrap. It loads fine in Chrome, Edge, and other browsers I've tested: the popup appears, then there is a spinner that shows until the content loads. But in Internet Explorer, when I click to load the popup, it appears that all scripts on the page pause until all of the data is received. For several seconds, nothing appears to be happening; then, the popup shows up with the requested content. We are using classic ASP to serve the data.
I have tried setting a timeout and now the popup will show up, but once the call starts, the spinner freezes until the data shows up.
I was wondering if anyone else has encountered this and knows of a workaround? This is the simplified version of what I have so far:
$scope.loadData = function() {
if (!isLoaded) {
$scope.loading = true;
$timeout(function(){
$http({
method: 'GET',
url: '/get_data.asp'
}).then(function(res) {
$scope.data = res.data.data;
$scope.loading = false;
});
}, 500);
}
}
I took an mp4 video, encoded it for HTTP Live Streaming (HLS) using ffmpeg — resulting in a series of myvideo.ts files and a myvideo.m3u8 playlist — and am attempting to play it using the HTML <video> tag in Safari, with the native HLS capabilities of that browser:
<video id="myvideo" src="myvideo.m3u8" loop="loop"></video>
It plays, once. But despite the "loop" attribute in the video tag, it doesn't loop. It stays frozen on the last frame of the video.
If I try to detect the end of the video using an event listener as described here:
Detect when an HTML5 video finishes
… that event never seems to fire.
The "paused" property in javascript (document.getElementById('myvideo').paused) evaluates to false, even after the video has played once and stopped.
How can I get the video to loop in Safari?
HLS is intended to be a live stream, so it never actually "finishes" in order to automatically loop. I used a JavaScript timer as a hack to get around this:
var LOOP_WAIT_TIME_MS = 1000,
vid = document.getElementById("myvideo"),
loopTimeout;
vid.addEventListener('play', function() {
if (!/\.m3u8$/.test(vid.currentSrc)) return;
loopTimeout = window.setTimeout(function() {
loopTimeout = null;
vid.pause();
vid.play();
}, (vid.duration - vid.currentTime) * 1000 + LOOP_WAIT_TIME_MS);
});
vid.addEventListener('pause', function() {
if (!/\.m3u8$/.test(vid.currentSrc)) return;
if (loopTimeout) {
clearTimeout(loopTimeout);
loopTimeout = null;
}
});
I am trying to record from the microphone using HTML5 in Chrome 29 Beta for Android (it has enabled web audio support in its beta 29). In the code below, ProcessAudio is the web audio filter function, in which I receive the input buffer from the microphone. I get the correct sample size. However, the audio pcm samples in mobile chrome are always zero. Does chrome disable the input to the audio filters in its mobile version? Has anybody got audio recording working using HTML5 in chrome mobile version?
The following code works fine in chrome (desktop version).
<!DOCTYPE HTML>
<html>
<head>
<script>
function GetMedia(obj, fnSuccess, fnFailure)
{
if(navigator.getUserMedia)
{
return navigator.getUserMedia(obj, fnSuccess, fnFailure);
}
else if(navigator.webkitGetUserMedia)
{
return navigator.webkitGetUserMedia(obj, fnSuccess, fnFailure);
}
else if(navigator.mozGetUserMedia)
{
return navigator.mozGetUserMedia(obj, fnSuccess, fnFailure);
}
else if(navigator.msGetUserMedia)
{
return navigator.msGetUserMedia(obj, fnSuccess, fnFailure);
}
alert("no audio capture");
}
var incrementer = 0;
function ProcessAudio(e)
{
var inputBuffer = e.inputBuffer.getChannelData(0);
var outputBuffer = e.outputBuffer.getChannelData(0);
outputBuffer.set(inputBuffer, 0);
document.getElementById("display").innerText =
incrementer + " " + inputBuffer[0];
incrementer++;
}
var context = null;
function Success(localMediaStream)
{
context = new window.webkitAudioContext();
var microphone = context.createMediaStreamSource(localMediaStream);
var node = context.createScriptProcessor(4096, 1, 1);
node.onaudioprocess = ProcessAudio;
microphone.connect(node);
node.connect(context.destination);
}
function Error(err)
{
alert("no audio support");
}
function load(e)
{
GetMedia({audio:true,video:false}, Success, Error);
}
</script>
</head>
<body onload="load(event)">
<div>Audio Player</div>
<div id="display"></div>
<video id="localvideo" autoplay="autoplay" style="opacity:1"></video>
</body>
</html>
We now have Web Audio input working in Chrome for Android Beta (31.0.1650.11).
There's an issue with inputBuffer in Chrome beta for Android right now - it always contains zeros (at least on those devices that I tested) as you mentioned - confirmed. That ain't much of help but for demo purposes the best I could achieve right now is playing "live" input stream via <audio> object. See here. Hit "record" and then start playing the audio object. The rest beyond that is TARFU in the current beta. Guess I'm waiting for G-folks to patch it asap. What I found out though, is that zingaya.com works fine (that is, records your audio and plays it back to you) on Chrome Beta for Android. Just try them out and they'll play back your stream. Apparently, this is made by leveraging WebRTC. In other words you evidently can record an audio stream that way, I haven't figured out how to do it just yet. Post it up if you come up with something. G-guys are working fast on the other hand - they've released a new beta version less than a week ago that at least can play audio fetched with XHR. The version prior to that couldn't do that even.