Develop Reference

Can't set currentTime in Chrome

For some reason in Chrome I can't set the currentTime property of the audio tag. I can alert the currentTime and it displays correctly but when I try to set the currentTime it reverts to zero. There is an event listener on a progress bar which triggers the alert shown below. It always displays as zero. In FireFox and IE the alert works just fine. What's the problem with Chrome?
$(document).ready(function(){document.getElementById('progressBar').addEventListener(
'click',
function(e) {
document.getElementById("audio_id_1").currentTime = 10;
alert(document.getElementById("audio_id_1").currentTime);
...
...
<audio id="audio_id_1" preload="metadata">
<source src="test.mp3" type="audio/mp3" />
</audio>

My chrome can seek "local" audios and videos well, whose source urls start wich "blob:"
So I solved this in such the redundant way:
download the whole media (XMLHttpRequest);
get the blob url (URL.createObjectURL);
change the source url of the media
function makeChromeSeekable(){
var player = document.getElementById("thevideo")
var uReader = new XMLHttpRequest()
uReader.open ('GET', player.src, true)
uReader.responseType = 'blob'
uReader.onload = () => {
player.src = URL.createObjectURL(uReader.response)
}
uReader.send()
}
makeChromeSeekable()
PS: The video files mignt be too large for downloading, but audio files should always be feasible.
PS. I used to believe that blob data has to be converted as data(File.getDataURL), but now using blob urls is ok seems more convenient.

Can't open downloaded video with PhoneGap

I download my files with:
var fileTransfer = new FileTransfer();
fileTransfer.download(
url,
target,
..
);
And then i open them later with:
window.open(targetUrl, '_blank', 'location=no');
It works for PDF, XLX, DOCX etc. but not for AVI or MP4.
It opens the Video Player with a Play Button and a 'loading..' Text.
If i try to open the AVI or MP4 directly it plays the files just fine.
What am I doing wrong? Thanks!
Edit: I use a iPad
Edit2: The Error: webView:didFailLoadWithError - 204: Plug-in handled load

Try something like this if you have HTML:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
Try something like this is you just have Javascript:
function addSourceToVideo(element, src, type) {
var source = document.createElement('source');
source.src = src;
source.type = type;
element.appendChild(source);
}
var video = document.createElement('video');
document.body.appendChild(video);
addSourceToVideo(video, targetUrl, 'video/mp4');
video.play();
Also, ensure that you have the inappbrowser plugin installed.
phonegap plugin add org.apache.cordova.inappbrowser
per: phonegap open link in browser

I found the solution to my question:
Streaming of Videos in the browser is supported and playing local files is not. A native plugin will do the trick

Mp4 from Dropbox used with HTML5 video player, is not repeating

I'm working on a Squarespace website, and they don't allow video upload, so I'm using Dropbox to host a video.
The video starts playing, but he is not repeating.
This is the code:
<video id="htmlVideo" loop="loop">
<source type="video/mp4" src="https://www.dropbox.com/s/videoID/videoplayback.mp4?dl=1">
</video>
What could be the problem?
This is how I create the video
/*
function repeatForDropbox() {
console.log("repeatForDropbox caled" + htmlVideo );
}
*/
function createVideo() {
var video = document.createElement("video");
video.id = "htmlVideo";
video.loop = "loop";
var vidSource = document.createElement("source");
vidSource.type = "video/mp4";
vidSource.src = "https://www.dropbox.com/s/videoID/videoplayback.mp4?dl=1";
video.appendChild( vidSource );
var vidLocation = document.querySelector('#location').parentNode;
vidLocation.appendChild( video );
htmlVideo = document.querySelector(" #htmlVideo ");
// on load, play the video/mp4
window.onload = function () {
setTimeout(function() {
htmlVideo.play();
// htmlVideo.addEventListener("ended", repeatForDropbox);
// I tried here to make the video repeat, using the "ended" event listener
// so when the video ended, the video
// should get another <source> element(same src)
// and delete the old one
// but the event didn't fire
// I also tried htmlVideo.onended = function() {} , but same result
}, 500);
}
}

Just a guess, but I suspect this relates to redirects. A Dropbox share link with ?dl=1 on it will redirect you to a one-time use URL to download the content. Perhaps when the video player tries to loop, it tries to access the target of the redirect again.
This might show up in the network traffic from the browser, so it's worth taking a look. (E.g. the network tab of Chrome inspector, if you're using Chrome.)

I would see if squarespace will let you save the binary of the video into a text file and then import it with AJAX and save it to indexedDB before converting it to video.
Here's some links:
Display a video from a Blob Javascript
https://simpl.info/video/offline/

Just in case anyone still needs the solution, I found a workaround using jQuery:
$('video').on('ended', function () {
this.load();
this.play();
});
However, there is a slight delay between repeats!

Can't make HTML5 Audio Tag to work on mobile browsers

I have a web app that uses the HTML5 <audio> tag and for some reason, while it works fine on Windows and Mac PCs, it doesn't work on iOS and Android.
Here's a relevant snippet of my code:
Javascript:
var audioElement = document.querySelector('#audioplayer');
var source = document.querySelector('#mp3');
source.src = tokObject._url;
audioElement.load();
audioElement.play();
HTML:
<center>
<audio id="audioplayer" style="width:480px;">
<source id="mp3" src="random-placeholder" type="audio/mp3" />
</audio>
</center>

You normally can't autoplay audio or video files on mobile devices, this is often a restriction by the OSes such as Android and iOS to stop sites from downloading huge media files and autoplaying them.
If such code is called from within a click or touch handler, it will probably work, but not the way you are currently doing it.
Also, the <center> element has been deprecated and you shouldn't use it anymore.

Not sure if this helps but I did this instead and it worked for me. While I am not playing an MP3 I am getting a voice to prompt the user through a loop.
function speak(text) {
var msg = new SpeechSynthesisUtterance();
var voices = speechSynthesis.getVoices();
msg.voice = voices[2];
msg.voiceURI = 'native';
msg.volume = 1;
msg.rate = 1;
msg.pitch = 1;
msg.text = text;
msg.lang = 'en-US';
speechSynthesis.speak(msg);
}
// insert this bottom bit to call the function and it will read in the mobiles native voice what you type in ie....rest works on android have not tried iphone.
speak('rest');

Have you tried it doing this way :
var aud=new Audio(file.mp3);
aud.play();

Delay in playing HTML5 audio file on mobile browsers

I am making a web app, and i needed to add a short sound when a button is being clicked.
the file is in mp3 format and around 24kb in size, i didnt want to use javascript to create the element so i added it to the DOM and used CSS to hide it, also i added preload="auto" so it gets loaded with the DOM
<audio id="click" preload style="display:none;">
<source src="sound/click.mp3" type="audio/mp3">
</audio>
in the javascript, i have something like:
var clickSound = $('#click')[0];
then in a function that listens to an even click on a button i have:
function(){
clickSound.play();
}
this works fine on my computer (firefox, chrome), but on mobile after clicking the trigger button, it will wait for like 3 seconds before it plays for the first time, and will now play instantly after the first delayed play.
Update:
i noticed even if i navigate to the mp3 file on my mobile like this http://example.com/sound/click.mp3 and click on play, it still delays, seems like it had to buffer.
anyway around this problem?
Complete Example:
Here is a jsFiddle for mobile testing.
var clickSound = document.getElementById('click');
var play = document.getElementById('play');
play.addEventListener('click', function() {
clickSound.play();
}, false);
<audio id="click" preload>
<source src="http://scriveit.com/sound/click.mp3" type="audio/mp3">
</audio>
<input id="play" type="button" value="play sound">

One way of doing that for smaller audio files is pre-loading the file as a blob:
<button>play</button>
<audio></audio>
<script>
var xhr = new XMLHttpRequest();
xhr.open('GET', 'click.mp3', true);
xhr.responseType = 'blob';
var audio = document.querySelector('audio');
xhr.onload = function () {
audio.src = URL.createObjectURL(xhr.response);
};
xhr.send();
document.querySelector('button').onclick = function () {
audio.play();
};
</script>
Please note that this requires XHR2 (http://caniuse.com/#feat=xhr2) and Blob URLs (http://caniuse.com/#feat=bloburls) and that the same origin policy applies here. Moreover, you should make sure that the file is sent with some strong caching headers to prevent that the clients reloads the file with every request.
Edit: Another approach is using Data URLs (see http://jsfiddle.net/apo299od/):
<button>play</button>
<audio></audio>
<script>
var audio = document.querySelector('audio');
audio.src = 'data:audio/mp3;base64,SUQzBAAAAAA...';
document.querySelector('button').onclick = function () {
audio.play();
};
</script>
The disadvantages here are that it is harder to maintain and that it will inflate your response size by 33%.