Develop Reference

Change HTML 5 autoplayed video source dynamically

On my website https://cravydev.netlify.com I'm trying to change the video dynamically when the different headlines are in viewport.
I'm using a div with HTML 5 autoplay and loop properties, but not able yet to change the video source and load again when the specific headline is on screen. Here are the details.
HTML
<div class="iphone-sticky"></div>
<div class="iphone-video">
<video autoplay loop muted poster="assets/img/poster.png" id="iphonevideo">
<source id="video1" src="assets/img/iphone-video.mp4" type="video/mp4">
<source id="video2" src="assets/img/iphone-video-1.mp4" type="video/mp4">
</video>
JS
//Detect is element is in viewport
$(window).on('resize scroll', function() {
var player = document.getElementById('iphonevideo2');
if ($('#headline2').isInViewport()) {
var source = document.getElementById('video1');
$(source).attr("src", "assets/img/iphone-video-1.mp4");
player.pause();
player.load();
} else if ($('#headline3').isInViewport()) {
var source = document.getElementById('video1');
$(source).attr("src", "assets/img/iphone-video.mp4");
player.pause();
player.load();
}
});
EDIT
I have been able to solve it thanks to Kley comment. Now the problem is that the js logic does not check constantly the viewport visibility of headlines, only once. Also, the video is played while scrolling and the poster image appears, making the whole experience a little bit weird.
Any suggestion to solve that?
Thanks!

Check the page, it's not the viewport ()
I could tell you that you are changing the src every time you scroll while it is visible, this is causing the video to restart. You must make a validation, if it has already been changed the src should not be changed again.
Note that # headline2 is not visible when # headline3 is a bit up.
you have to scroll down until the end of the page to enter this condition.
You could use another smaller element at the beginning of each #headline to do this validation.
you could use the first p of the #headline
For example:
$(window).on('resize scroll', function() {
var player = document.getElementById('iphonevideo2');
if ($('#headline2 p').eq(0).isInViewport()) {
var source = document.getElementById('video1');
var url = "assets/img/iphone-video-1.mp4";
var src = $(source).attr("src");
// validate if you already have the src
if(src==url) return; // if exists src leaves function
$(source).attr("src", url);
player.pause();
player.load();
} else if ($('#headline3 p').eq(0).isInViewport()) {
var source = document.getElementById('video1');
var src = $(source).attr("src");
var url = "assets/img/iphone-video.mp4";
// validate if you already have the src
if(src==url) return; // if exists src leaves function
$(source).attr("src", url);
player.pause();
player.load();
}
})

HTML5 video: how to turn off subtitles

I'm creating an HTML5 video player, and want a button that turns subtitles on and off. To switch them off, I'm setting the default track's "mode" attribute to "hidden", but they're not disappearing in Chrome 66.
Here's the line of jQuery that should turn subtitles off (the player's id is "player"):
$"#player track").eq(0).attr("mode", "hidden");
The "mode" attribute changes to "hidden" in the DOM, but the subtitles are still visible. Any idea why that would be?

Expanding upon my comment; what you should try is disable the subtitles on all tracks (in case you have more than one).
There might be an easier way using jQuery, however I have never worked with html5 player using jQuery hence my answer.
var video = document.querySelector('#player');
for (var i = 0; i < video.textTracks.length; i++) {
video.textTracks[i].mode = 'hidden';
}

$(".ccbutton").click(function(){
var video = document.querySelector('#video');
for (var i = 0; i < video.textTracks.length; i++) {
if(video.textTracks[i].mode == 'hidden')
video.textTracks[i].mode = 'showing';
else
video.textTracks[i].mode = 'hidden';
}
});

Javascript Auto refresh after video is played

I am trying to implement a feature where my index will auto refresh after one of the auto played videos play. I have tried various scripts yet none seem to work.
var videos = [
'D1sZ_vwqwcE',
'J7IMwop3RHs',
'BC_Ya4cY8RQ',
'HPc8QMycGno',
'JDglMK9sgIQ',
'gHssu4WOHug',
'hgKDu5pp_fU',
'5LILChvqUo4',
'4HVjldqWx4w',
'4UwH97qI0aM'
];
var index=Math.floor(Math.random() * videos.length);
index.onended = function() {
window.open("index.html", "_self");
};
var html='<div class="video-background"><div class="video-foreground"><iframe frameborder="0" src="https://www.youtube.com/embed/' +videos[index] + '?controls=1&showinfo=0&rel=0&autoplay=1&iv_load_policy=3&amp" allow="autoplay""></iframe></div></div>';
document.write(html);
What isn't working is the refresh script. I'm not sure if I'm linking it to the right variable or something.
var index=Math.floor(Math.random() * videos.length);
index.onended = function() {
window.open("index.html", "_self");
};
note the first line runs fine. It's the next 3 that I don't understand.
(this won't autoplay on chrome unless you hit ctrl+r. Since Chrome changed its autoplay policy.)

Iframe fetching the full screen method from iframe source

I try to create a one liner iframe that users can add in their sites and this iframe adress is my site.
My problem is that if i want it to be able to become full screen i need to supply them with js code and i don't want it i want it to fetch the js code from my site.
The js that i use to make full screen when needed is :
<script>
window.addEventListener('message', receiveMessage, false);
function receiveMessage(evt) {
if (evt.origin === 'site src') {
//if (isNaN(evt.data)) return;
var iframe = document.getElementById('someId');
if (event.data.height !== 0) {
iframe.height = 100 + "%";
iframe.width = 100 + "%";
iframe.style.position = 'fixed';
iframe.style.top = '2%';
iframe.style.left = '2%';
}
else {
iframe.height = 110 + "px";
iframe.width = 300 + "px";
iframe.style.position = 'relative';
}
}
}
</script>
This script currently written at the client the one that use the iframe.
The iframe looks like.
<iframe id="expertips_iframe" src="my site adress" width="300px" height="110px" frameBorder="0" scrolling="no"></iframe>
I want the iframe line to fetch the js code from my site and inject it to the user/client that use the iframe, or any other way as long as i do it (the iframe and the js) in one line.
Hope it is clear enough and thank you.

playing videos with html5 on android device

I'm building a mobile site and I'm having trouble playing video on android devices. I can get the video to play but find it erratic. Sometimes it causes the browser to crash, other times the controls aren't responsive. Most of my testing is on the Galaxy S3 and Nexus.
The code is a link that you can click to play the video.
<div id="player"></div>
<?php echo $result_videos[$i]["camera_name"]; ?>
The javascript/jquery mix (not very optimal, so maybe this is the problem):
function DoNav(theUrl)
{
// only add the player if it doesn't yet exist
if($('#myfileplayer').length == 0) {
var mydiv = $("#player");
var myvideo = $("<video id='myfileplayer' src='"+ theUrl + "' width='320' height='240' controls></video>");
mydiv.append(myvideo);
} else {
$('#myfileplayer').attr("src",theUrl);
}
var video = document.getElementById('myfileplayer');
video.addEventListener('click',function(){
video.play();
},false);
}
I'm not sure what else to debug here. Any ideas?

Thanks to #akonsu he mentioned why I would even need the click event listener? Good point, I don't. I remove that and all the weird behavior is gone.
function DoNav(theUrl)
{
// only add the player if it doesn't yet exist
if($('#myfileplayer').length == 0) {
var mydiv = $("#player");
var myvideo = $("<video id='myfileplayer' src='"+ theUrl + "' width='320' height='240' controls></video>");
mydiv.append(myvideo);
} else {
$('#myfileplayer').attr("src",theUrl);
}
}