We Keep Coding

Add attribute to html tag with Javascript

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

How to keep synchronized video element especially after pause/play event in (html5/javascript)

I try to have in a html5 webpage project three elements fully synchronized. To ensure no shift due to video download, I put the attribute preload="auto" to the video elements.
My script is as follows:
var run = document.getElementById("run"); //run is a button element
var vid = document.getElementById("video1"); // the first video element
function PlayVideo() {
if (vid.paused) {
vid.play();
run.textContent = "||";
} else {
vid.pause();
run.textContent = ">";
}
} // The PlayVideo() function is called onclick on the run button
$('#video1').on('play', ambiance = function(){
document.getElementById("video2").play();
document.getElementById("video3").play();
});
$('#video1').on('pause', ambiance = function(){
document.getElementById("video2").pause();
document.getElementById("video3").pause();
});
When using this piece of script after waiting few seconds to a complete load of the video files, the run button plays correctly the first video and the two others start synchronized. But when I pause the run button pushing a second time on it, only the first video stops and the two others continue to be played during 2 or 3 seconds (both of them synchronized but not with the first one).
Could you help me?
Is there an other way (more elegant) to play synchronized video?
One last element: the source of the three video is the same. (Same video played in each elements).
Thank you

Try something like this:
var videos = document.querySelectorAll('video');
function playAll() {
[].forEach.call(videos, function(video) {
video.play()
});
}
function pauseAll() {
[].forEach.call(videos, function(video) {
video.pause()
});
}
// this keeps everything synchronized
[].forEach.call(videos, function(video) {
video.addEventListener('play', playAll, false);
video.addEventListener('pause', pauseAll, false);
});
Keep in mind there will probably still be a slight offset (if you have sound it'll sound distorted)

Checking for end of video on iPad

I can't seem to listen for onended on a video on iPad(Safari)...I want to remove a class that I was able to add when the play button was pressed, but I can't seem to track down when the video ends (works well every where else including iphone, just need it for iPad/Safari)
link here: http://www.artandseek.net/meyerson/tour/
code snippet here
$(".playBtn").click(function(){
var thisVideo = $(this).prevAll(".img-wrap").children(".togglePlay").get(0);
thisVideo.onended = function(e) {
$(this).fadeOut().parent(".img-wrap").removeClass("playing");
$(this).parent().next("h2").fadeIn();
classie.remove( thisVideo, 'tabletActive');
}; ...

I was able to find the answer here:
Bind Play/Pause/Ended functions to HTML5 video using jQuery
using this:$(thisVideo).bind('ended', function () {
console.log('working');
});

pause JW player?

I have three tabs.
Each tab having two videos in slider.
The problem is when I switch any tab or click any single video,all other should pause.
I can collect all the ids and then loop over to use stop().But is there any other method that is much more cleaner and simpler.?
jwplayer('video_pub').stop(); //for 1 video..how can i do for all videos?

Instead of using jwplayer().stop(), you can use jwplayer().pause()
for this, I mostly prefer jwplayer().play(false).
Source : Jwplayer API
LOGIC
just get the parent video wrapper which have all tab (since
each tab has two video)... find jwplayer whiich is currently being
played and stop all other players.
pauseMedia : function(playingMediaId) {
$('#parent_video_wrapper').find('.jwplayer, object').each(function(){
currentMediaId =$(this).attr('id');
if( jwplayer(this).getState() == "PLAYING" || jwplayer(this).getState() == "BUFFERING" ) {
if(currentMediaId != playingMediaId){
jwplayer(this).play(false);
}
}
});
}
now you can either use above function as pauseMedia() or
pauseMedia(mediaId), Both will work
In video Setup if you use it like this
jwplayer("video_"+videoId).setup({
events : {
onPlay : function (callback){
var playingVideoId = 'video_'+videoId;
pauseMedia(playingVideoId);
//pausing other simulatenously playing video in a tab
}
}
});
I think above code might do the trick, just give it a try

HTML5 Video Not Pausing

I am working on a iPad HTML app that has two videos in it. The HTML code is loaded dynamically. The page has two videos with text corresponding to them. The videos also have just two controls. Play and Pause. However the issue I am having is the Video will only pause when the other is playing. Basically in my if / else statement the else is not being called at all. Here is my code. Anyone know why it won't pause when trying to click on the overlay again? Thank you in advance!
$('div[class*="video-overlay"]').bind('mousedown', function() {
var video = $(this).next('video')[0];
var text = $(this).attr('data-play');
if (video.paused) {
video.play();
$('p').addClass('fade');
$('#' + text).removeClass('fade');
$(this).removeClass('overlay');
$('div[class*="video-overlay"]').not(this).addClass('overlay');
$(this).children().removeClass('video-play');
$('video').not($(this).next(el)).get(0).pause();
$('.play').not($(this).children()).addClass('video-play');
$(video).on('ended', function() {
$(this).prev('div').children().addClass('video-play');
video.pause();
});
} else {
video.pause();
console.log('Hey mom, I paused all by myself!');
}
});

Without your html, I can't be sure, so I can only guess.
var video = $(this).next('video')[0];
change this line to
var video = $(this).find('video')[0];
To get a more definite answer, please provide your html code.

It was actually in my CSS. I didn't have the overlay in front of the video. So I changed the z-index to a higher value and the fixed it. I had the play button in front so it was playing the video, just not the overlay. Doh!