Develop Reference

HTML5 Video loadeddata event does not work in IOS Safari

I am trying to trigger an event once a video has loaded the first frame. The code I have used works in desktop browsers that I have tested in but it does not work in mobile safari on IOS. Is there something about the code that is not supported on mobile safari or is there another solution to achieve what I want?
function loadvideo (vidsource){
var vid = document.createElement('video');
vid.src = vidsource;
alert("Video about to load"); //This works fine in mobile safari
vid.addEventListener('loadeddata', function() {
alert("Video Loaded!"); //This does not display in mobile safari
//Will do something else here
}, false);
}

On iOS, it looks like the video doesn't get loaded unless the user hits play, or if the autoplay attribute has been added (which doesn't actually appear to autoplay it).
The following should work for you:
var vid = document.createElement('video');
if (/iPad|iPhone|iPod/.test(navigator.userAgent))
vid.autoplay = true;
vid.addEventListener('loadeddata', function() {[...]}, false);
vid.src = videosource;
Alternatively, you can listen to the progress event instead of loadeddata, which seems to work fine on iOS Safari.

Add preload="metadata" to video tag and then listen to loadedmetadata event. It works in IOS Safari as well

try not to use addEventListener is this case, use older on style, AND set src AFTER you setup an event listener:
...
vid.onloadeddata = function () {
alert("Video Loaded!");
// do something
}
vid.src = vidsource;
...
If an EventListener is added to an EventTarget while it is processing an event, it will not be triggered by the current actions but may be triggered during a later stage of event flow, such as the bubbling phase. - To learn more - https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

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!

html audio element not working in iOS

So I'm trying to play audio in all browsers it works in all others but anything in iOS. I do understand that iOS doesn't allow auto play but as shown I am using another button to trigger the play.. What am I doing wrong?
audioElement = document.createElement("audio");
audioElement.setAttribute("preload", "none");
audioElement.setAttribute("id", "audioPlayer");
document.getElementById("PlayAudio").appendChild(audioElement);
var source_sound = document.createElement("source");
audioElement.appendChild(source_sound);
source_sound.setAttribute("src", 'somefile.php/something.wav');
$("#playButton").click(function (e) {
audioElement.load();
audioElement.play();
)};

HTML 5 dynamically loaded videos causing black screen on iPad

I'm loading in videos dynamically by changing the video tag's src in code. When I try my code on an ipad (no idea if it works in the simulator or not), the first video plays fine but the next one just gives me a black screen. I have tried playing the second video first (to check for encoding issues) and it plays fine.
Here is my javascript function that loads/plays the video:
function loadVideo(video_path){
var vid = document.getElementById('v');
vid.src = video_path;
vid.load();
// play the video once it has loaded
vid.addEventListener('canplaythrough', function(e){
vid.style.display = "block";
vid.play();
}, false);
// hide the video container once the video has finished playing
vid.addEventListener('ended', function(e){
vid.style.display = "none";
}, false);
}
Called from my code like:
$('a').click(function(){
switch(video){
case 0:
loadVideo('path/to/myvideo.mp4');
break;
case 1:
loadVideo('path/to/myvideo2.mp4');
break;
case 2:
loadVideo('path/to/myvideo3.mp4');
break;
// etc
}
video++;
});
And my html inside the body tag:
<video id="v" type="video/h264" width="960" height="500"></video>
I have tried removing the video tag after each play and inserting it in again but that had no effect. Ideas welcome! :)

This isn't a solution for your exact question, but the concepts are there and you should be able to adjust it to your own code (the full extent of which I'm not privy to, of course). The following code is something I put together to have the VIDEO element load in and play the next video source in a queue automatically after the current video source is done.
The reason I use timeupdate to check for the video being "near" the end instead of just looking for the ended event is because the ended event is notoriously unreliable on older devices (such as the original iPad). You can use the ended event if you so wish, of course.
(function ($) {
var srcs = [
"video1.mp4",
"video2.mp4",
"video3.mp4",
"video4.mp4"
],
index = 0,
$video = $("#vid").attr("src", srcs[index]).bind("timeupdate", timeUpdateHandler),
video = $video.get(0);
function timeUpdateHandler(e) {
if (video.currentTime >= (video.duration - 0.1)) {
nextVideo();
}
}
function nextVideo() {
index++;
if (index === srcs.length) {
index = 0;
}
$video.attr("src", srcs[index]);
video.play();
}
})(jQuery);
Let me know if this helps you or if you have any questions.

You can use
<video onended="javascript:on_video_ended();"></video>
<script>
function on_video_ended(){
//javascript code goes here.
}
</script>

Getting Current YouTube Video Time

I am writing a Browser Plugin and need to find a way to get the current time a YouTube Video playing on YouTube using JavaScript. I have been playing around in the Chrome JavaScript Console and haven't had any luck.
It appears that the chrome API only works with embedded video players not a video that is playing on on youtube.com. One option I looked into is in the share section of a video their is an input box for the "start at:" time that contains the current time of the video. I have tried using .value and .text on this input box and they both return undefined? Does anyone have any ideas?

ytplayer = document.getElementById("movie_player");
ytplayer.getCurrentTime();
See the api
Update: if it didn't work, also try player.playerInfo.currentTime (codepen live example)

Depends on what you want
player.getCurrentTime():Number
Returns the elapsed time in seconds since the video started playing.
player.getDuration():Number
Returns the duration in seconds of the currently playing video. Note
that getDuration() will return 0 until the video's metadata is loaded,
which normally happens just after the video starts playing.
http://code.google.com/apis/youtube/js_api_reference.html

Finally I found how to make it work on iOS (and Android too).
Actually, the whole youtube js api was broken for me if run on mobile browser.
Problem solved by creating player using new YT.Player as described in YouTube IFrame API.
Please note: only creating <iframe> from <div> placeholder works for mobile browsers at the time. If you try to use existing <iframe> in new YT.Player call, as mentioned in IFrame API, this will not work.
After player created, it's possible to use player.getCurrentTime() or player.getDuration() with player instance created.
Note: I had no luck calling this methods on player obtained with
player = document.getElementById(...) (from #JosephMarikle answer).
Only created player instance worked in mobile browsers.
Useful links:
YouTube IFrame API
YouTube JavaScript API
YouTube Player Demo

You can use Html5 Video API on youtube.com
var htmlVideoPlayer = document.getElementsByTagName('video')[0];
htmlVideoPlayer.currentTime
Note: It's not gonna work on Youtube Iframe API because Iframes are isolated. You cannot access the context of a Youtube IFrame .

In 2020, this works:
player.playerInfo.currentTime
full code:
see it live on codepen

Just FYI, There is a new iframe API for the YouTube player:
https://developers.google.com/youtube/iframe_api_reference

document.querySelector('video').currentTime

Stop at specific time youtube video and show notification box in GWD
<script>
var yid = document.getElementById("gwd-youtube_1");
var idBox = document.getElementById("box1");
pausing_function = function(event) {
var aa = setInterval(function() {
if (yid.getCurrentTime() > 8.0 && yid.getCurrentTime() < 8.1) {
yid.pause(yid);
idBox.style.opacity = 1;
console.log(yid.getCurrentTime() + "playing")
clearInterval(aa);
yid.removeEventListener("playing", pausing_function);
}
}, 100)
}
yid.addEventListener("playing", pausing_function);
var pausing_function_1 = function() {
if (yid.getCurrentTime() > 8.1) {
console.log(yid.getCurrentTime() + "pause")
// remove the event listener after you paused the playback
yid.removeEventListener("playing", pausing_function);
}
};
</script>
play video and hide notification
<script type="text/javascript" gwd-events="handlers">
window.gwd = window.gwd || {};
gwd.pauseVideo = function(event) {
var idBox = document.getElementById("box1");
idBox.style.opacity = 0;
};
</script>
<script type="text/javascript" gwd-events="registration">
// Support code for event handling in Google Web Designer
// This script block is auto-generated. Please do not edit!
gwd.actions.events.registerEventHandlers = function(event) {
gwd.actions.events.addHandler('gwd-youtube_1', 'playing', gwd.pauseVideo, false);
};
gwd.actions.events.deregisterEventHandlers = function(event) {
gwd.actions.events.removeHandler('gwd-youtube_1', 'playing', gwd.pauseVideo, false);
};
document.addEventListener("DOMContentLoaded", gwd.actions.events.registerEventHandlers);
document.addEventListener("unload", gwd.actions.events.deregisterEventHandlers);
</script>