Develop Reference

How to get .load() working within .each() loop?

I'm modifying a bit of code I found here from this question.
I am trying to get it working now for multiple instances of a video. This is the only way I can get it working but I would like to make it work for each instance that there is a video which changes on each page this applies on.
$( function() {
const bgv = $('.bgvid');
$('source', bgv).each(function() {
const el = $(this);
el.attr('src', el.data('src'));
});
bgv[0].load();
bgv[1].load();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video class="bgvid" playsinline="playsinline" loop="loop" autoplay="autoplay" muted="muted" preload="none">
<source type="video/mp4" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2_512kb.mp4">
</video>
<video class="bgvid" playsinline="playsinline" loop="loop" autoplay="autoplay" muted="muted" preload="none">
<source type="video/mp4" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2_512kb.mp4">
</video>
I have tried putting it within a loop like this instead of the bgv[0].load(); but it didn't work:
$('.bgvid').each(function(){
$(this).load();
});

Just call this.load(), don't convert the DOM element into a jQuery element.
$( function() {
const bgv = $('.bgvid');
$('source', bgv).each(function() {
const el = $(this);
el.attr('src', el.data('src'));
});
bgv.each(function() {
this.load();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video class="bgvid" playsinline="playsinline" loop="loop" autoplay="autoplay" muted="muted" preload="none">
<source type="video/mp4" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2_512kb.mp4">
</video>
<video class="bgvid" playsinline="playsinline" loop="loop" autoplay="autoplay" muted="muted" preload="none">
<source type="video/mp4" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2_512kb.mp4">
</video>

JavaScript Play Button 1 Starts Video for Play Button 2

I am making a webpage that has two videos on it. I want each video to play when its poster image is clicked on. To do this, I added the script below to each video, and changed the id for each to "video1" and "video2".For some reason both videos play and stop the second video. I can't see why. Below is my code:
HTML
<div class="fade">
<button onclick="playPause()">
<video id="video1" width="350px" height="250" poster="images/video-
poster-2.jpg" controls>
<source src="videos/pup-head-lite-video.mp4" type="video/mp4">
<source src="videos/pup-head-lite-video.webmhd.webm" type="video/webm">
Your browser does not support this video.
</video>
</div>
<br/>
<br/>
<div class="fade">
<button onclick="playPause()">
<video id="video2" width="350px" height="250" poster="images/video-
poster.jpg" controls>
<source src="videos/original-portable-dog-potty.mp4" type="video/mp4">
<source src="videos/original-portable-dog-potty.webm"
type="video/webm">
Your browser does not support this video.
</video>
</div>
SCRIPTS
<script>
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
</script>
<script>
var myVideo=document.getElementById("video2");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
</script>`
NEW CODE
<div class="fade">
<button onclick="playPause('video1')">
<video id="video1" width="350px" height="250"
poster="images/video-poster-2.jpg" controls>
<source src="videos/pup-head-lite-video.mp4"
type="video/mp4">
<source src="videos/pup-head-lite-video.webmhd.webm"
type="video/webm">
Your browser does not support this video.
</video>
</div>
<br/>
<br/>
<div class="fade">
<button onclick="playPause('video2')">
<video id="video2" width="350px" height="250"
poster="images/video-poster.jpg" controls>
<source src="videos/original-portable-dog-potty.mp4"
type="video/mp4">
<source src="videos/original-portable-dog-potty.webm"
type="video/webm">
Your browser does not support this video.
</video>
</div>
</div>
<script>
function playPause(video)
var myVideo=document.getElementById("video");
{
if (myVideo.paused)
myVideo.play();
}else
myVideo.pause();
}
}
</script>

You're having issues because you are using the same variable to refer to the video in both cases. You repeated yourself a little bit in your code, so I tried to cut out those bits. Let me know if you have any issues.
<div class="fade">
<button onclick="playPause('video1')">
<video id="video1" width="350px" height="250" poster="images/video-
poster-2.jpg" controls>
<source src="videos/pup-head-lite-video.mp4" type="video/mp4">
<source src="videos/pup-head-lite-video.webmhd.webm" type="video/webm">
Your browser does not support this video.
</video>
</div>
<br/>
<br/>
<div class="fade">
<button onclick="playPause('video2')">
<video id="video2" width="350px" height="250" poster="images/video-
poster.jpg" controls>
<source src="videos/original-portable-dog-potty.mp4" type="video/mp4">
<source src="videos/original-portable-dog-potty.webm"
type="video/webm">
Your browser does not support this video.
</video>
</div>
<script>
function playPause(video)
{
var myVideo=document.getElementById(video);
if (myVideo.paused) {
myVideo.play();
} else {
myVideo.pause();
}
// you could consolidate the above if/else to be:
// myVideo.paused ? myVideo.play() : myVideo.pause();
}
</script>

Your problem comes from the fact that you use the same names for everything:
<script>
var myVideo=document.getElementById("video1"); // Creates variable myVideo
function playPause() // Creates a function called playPause
{
// Plays or pauses "myVideo"
}
</script>
<script>
var myVideo=document.getElementById("video2"); // Overrides the value of "myVideo" to point to video2 instead
function playPause()
{
// Plays or pauses "myVideo"
}
</script>
So when you actually call playPause, myVideo has always been set to point to video2.
I suggest that you pass the ID of the video you want to play or pause when you call playPause, and that you only define playPause once - that second definition is totally redundant, since it's the exact same code.
function playPause(videoId) {
var myVideo=document.getElementById(videoId);
if (myVideo.paused) {
myVideo.play();
} else {
myVideo.pause();
}
}
Then your buttons can be rewritten to be
<button onclick="playPause('video1')">
<button onclick="playPause('video2')">

How do i set my volume for my autoplay to be at a specific level?

In my page i have an autoplaying piece of audio, however i need to volume to be set to a specific level just incase a user has their volume up at 100%. Any idea on how to do this
HTML Code:
<audio autoplay>
<source src="Media File here">
</audio>

You can use the volume attribute:
<audio autoplay="autoplay" volume="0.5">
<source src="Media File here">
</audio>
values can be from 0.0 (silent) to 1.0 (loudest)
update
It seems like the volume attribute is not well-implemented, so here is a workaround:
audio_tags = document.getElementsByTagName('audio')
for (var i = 0; i < audio_tags.length; i++) {
audio_tags[i].addEventListener("loadstart", function() {
this.volume = this.getAttribute('volume');
}, true);
}
<audio controls="controls" volume="0.1">
<source src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Example.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<br /><br />
<audio controls="controls" volume="0.9">
<source src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Example.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>

HTML5 Video autoplay in Android

I am developing an html5 player supports ads with video-js
Since i know it doesn't work in iOS, is it the same on Android?
So far i've tried these with no luck on autoplay in Android
HTML
<video id="inReadPlayer" autoplay loop="loop"
controls preload="auto" class="video-js vjs-default-skin" width="640"
height="360" > <source src="'+videoSource+'" type="video/mp4">
</video>
JS
var player = videojs('inReadPlayer', { /* Options */ }, function() {
this.play();
this.on('ended', function() {
});
});
Thanks in advance

Try this:
var videoplayer = document.getElementById('inReadPlayer')
videoplayer.addEventListener("load", function() {
videoplayer.play();
});
videoplayer.onended = function() {
source.setAttribute('src', 'MAINVIDEO.mp4');
};
<video id="inReadPlayer" autoplay loop="loop"
controls preload="auto" class="video-js vjs-default-skin" width="640"
height="360" > <source src="'+videoSource+'" type="video/mp4">
</video>
Note that this snippet won't work because there is no video source

HTML / JavaScript Make a video play once a condition is met

For my website, I wanted a specific video to play, once a condition is met.
e.g (If x = 1, play the video)
I have this code in the HTML file:
<div id="video">
<video width="320" height="240" autoplay,>
<source src=video_mp4 type="video/mp4">
<source src=video_ogg type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
And in the JavaScript file:
document.getElementById("video").innerHTML.source.src = video_mp4;
document.getElementById("video").innerHTML.source.src = video_ogg;
But it doesn't seem to work.

You can use the following :
<video id="video1" src="vid.mp4"></video>
<script>
function playVideo(){
var video= document.getElementById("video1");
video.load();
video.play();
}
</script>