I have this code which populates the src attributes of the sources if the user is not on mobile:
if($.browser.mobile)
{
console.log("is mobile")
// it is mobile browser
}
else
{
console.log("is desktop")
// no mobile browser
var sources = document.querySelectorAll('video#patient-video source');
// Define the video object this source is contained inside
var video = document.querySelector('video#patient-video');
for(var i = 0; i<sources.length;i++) {
sources[i].setAttribute('src', sources[i].getAttribute('data-src'));
}
// If for some reason we do want to load the video after, for desktop as opposed to mobile (I'd imagine), use videojs API to load
video.load();
video.muted= "muted";
}
To check if it's a mobile browser, I use the plugin:
detectmobilebrowser.js
My HTML is as follows:
<video id="patient-video" width="100%" preload="none" poster="../../assets/img/patient-home-1600.jpg" autoplay loop>
<source data-src="../../assets/video/patient-home-video-p.mp4" src="" type="video/mp4">
<source data-src="../../assets/video/patient-home-video-p.webm" src="" type="video/webm">
<source data-src="../../assets/video/patient-home-video-p.ogv" src="" type="video/ogg">
</video>
This works fine for one specific video, but how can I adapt the Javscript so that it does the same for all videos on the page.
I have this code which populates the src attributes of the sources if the user is not on mobile:
if($.browser.mobile)
{
console.log("is mobile")
// it is mobile browser
}
else
{
console.log("is desktop")
// no mobile browser
var sources = document.querySelectorAll('video#patient-video source');
// Define the video object this source is contained inside
var video = document.querySelector('video#patient-video');
for(var i = 0; i<sources.length;i++) {
sources[i].setAttribute('src', sources[i].getAttribute('data-src'));
}
// If for some reason we do want to load the video after, for desktop as opposed to mobile (I'd imagine), use videojs API to load
video.load();
video.muted= "muted";
}
To check if it's a mobile browser, I use the plugin:
detectmobilebrowser.js
My HTML is as follows:
<video id="patient-video" width="100%" preload="none" poster="../../assets/img/patient-home-1600.jpg" autoplay loop>
<source data-src="../../assets/video/patient-home-video-p.mp4" src="" type="video/mp4">
<source data-src="../../assets/video/patient-home-video-p.webm" src="" type="video/webm">
<source data-src="../../assets/video/patient-home-video-p.ogv" src="" type="video/ogg">
</video>
This works fine for one specific video, but how can I adapt the Javscript so that it does the same for all videos on the page.
Share Improve this question edited Dec 29, 2018 at 3:41 Rachel Gallen 28.6k22 gold badges75 silver badges86 bronze badges asked May 30, 2016 at 16:45 user1937021user1937021 10.8k25 gold badges85 silver badges150 bronze badges 3- you can use media queries to detect the size of the browser – Rachel Gallen Commented May 30, 2016 at 18:59
- @BenPhilipp there is no need for jquery foreach, the OP just needs to use a class instead of an id – Rachel Gallen Commented May 30, 2016 at 19:06
-
@RachelGallen Yes. Or a type, or some other mon denominator - what I meant by "something like"
.each()is not "they need jQuery", I was just talking about a general way to collect the target objects; point being it's not a mobile / desktop issue but a collection issue. I did overlook the fact that they were indeed already setting up a collection because it was fishing for an ID - apologies – Ben Philipp Commented May 30, 2016 at 22:30
1 Answer
Reset to default 6You should use a class not an id if you are using multiple vids of the same name
if($.browser.mobile)
{
console.log("is mobile")
// it is mobile browser
}
else
{
console.log("is desktop")
// no mobile browser
var sources = document.querySelectorAll('video.patient-video source');
// Define the video object this source is contained inside
var video = document.querySelector('video.patient-video');
for(var i = 0; i<sources.length;i++) {
sources[i].setAttribute('src', sources[i].getAttribute('data-src'));
}
// If for some reason we do want to load the video after, for desktop as opposed to mobile (I'd imagine), use videojs API to load
video.load();
video.muted= "muted";
}
note the dot instead of the hash tag. You don't even need the 'video' before it. Don't forget to update your html accordingly
it should be
<video class="patient-video" width="100%" preload="none" poster="../../assets/img/patient-home-1600.jpg" autoplay loop>
<source data-src="../../assets/video/patient-home-video-p.mp4" src="" type="video/mp4">
<source data-src="../../assets/video/patient-home-video-p.webm" src="" type="video/webm">
<source data-src="../../assets/video/patient-home-video-p.ogv" src="" type="video/ogg">
</video>