So what I am trying to to is load different video based on the screen size of the device.
Here is my jQuery:
var v = new Array();
v[0] = [
"header.webm",
"header.ogv",
"header.mp4"
];
v[1] = [
"mobHead.webm",
"mobHead.ogv",
"mobHead.mp4"
];
var src = $('#bgvid source');
if(window.innerWidth >= 642){
src.attr("src", v[0]);
}
if(window.innerWidth <= 641){
src.attr("src", v[1]);
}
Here is my HTML:
<video autoplay="" loop="" poster="" id="bgvid">
<source src="" type="video/webm">
<source src="" type="video/ogg">
<source src="" type="video/mp4">
</video>
Here is the browser output:
<video autoplay="" loop="" poster="" id="bgvid">
<source src="header.webm,header.ogv,header.mp4" type="video/webm">
<source src="header.webm,header.ogv,header.mp4" type="video/ogg">
<source src="header.webm,header.ogv,header.mp4" type="video/mp4">
</video>
You can see where the problem lies. I need it to load them into the proper cascading order and not load them all into the same section.
How can I do this?
Since you already have jQuery in your project, use it:
HTML:
<video autoplay="" loop="" poster="" id="bgvid">
<source id="webmvid" src="" type="video/webm">
<source id="oggvid" src="" type="video/ogg">
<source id="mp4vid" src="" type="video/mp4">
</video>
JS:
var v = [];
v[0] = ["header.webm", "header.ogv", "header.mp4"];
v[1] = ["mobHead.webm", "mobHead.ogv", "mobHead.mp4"];
var index = window.innerWidth <= 641 ? 1 : 0;
$('#webmvid').attr('src', v[index][0]);
$('#oggvid').attr('src', v[index][1]);
$('#mp4vid').attr('src', v[index][2]);
Basically I just made your if-case shorter and targeted each video src with an Id and jQuery.
Try This (add id to each < source > and reference them in js):
HTML:
<video autoplay="" loop="" poster="" id="bgvid">
<source id="src1" src="" type="video/webm">
<source id="src2" src="" type="video/ogg">
<source id="src3" src="" type="video/mp4">
</video>
JS:
v1 = {
webm: "header.webm",
ogv: "header.ogv",
mp4: "header.mp4"
}
v2 = {
webm: "mobHead.webm",
ogv: "mobHead.ogv",
mp4: "mobHead.mp4"
};
if(window.innerWidth >= 642){
$('#src1').attr("src", v1.webm);
$('#src2').attr("src", v1.ogv);
$('#src3').attr("src", v1.mp4);
}
else
{
$('#src1').attr("src", v2.webm);
$('#src2').attr("src", v2.ogv);
$('#src3').attr("src", v2.mp4);
}
Related
Im trying to display webms on my homepage in a random order
every time someone access the homepage.
I think, i got the random part done, my problem is,
getting the path string into the source src="" of my html code
my current take on this is:
HTML
<div class="window" id="videos" style="display: none;">
<div class="content">
<center>
<video controls width="500">
<source id="random_webm" src="" type="video/webm">
Your browser does not support HTML5 or .webm video, gramps.
</video>
</center>
</div>
</div>
JS
function random_webm(max) {
var src = ["videos/ship.webm", "videos/ira.webm"];
return random_webm.src = src[Math.floor(Math.random() * src.length)];
src = rndwebm(3);
document.getElementById('random_webm').src = src.rndwebm(3);
};
other things i tried
https://pastebin.com/raw/3Sjpd0gW
concluision - how it works now:
<div class="window" id="videos" style="display: none;">
<div class="header">
<img class="icon" src="images/video.png">
gnu.3gp
<div class="buttons">
<button id= "videos" title="minimize" class="window_content" onclick="videos() ">_</button>
<button>◽</button>
<button id= "videos" title="minimize" class="window_content" onclick="videos() ">X</button>
</div>
</div>
<div class="content">
<center>
<video controls width="500" id="random_webm" src="">
<source type="video/webm">
Your browser does not support HTML5 or .webm video, gramps.
</video>
</center>
</div>
</div>
function videos() {
var src = ["videos/ship.webm", "videos/ira.webm"];
document.getElementById('random_webm').src = src[Math.floor(Math.random() * src.length)];
var x = document.getElementById("videos");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
random_webm()
Try this code, and adapt it to your needs.
function random_webm() {
var src = ["videos/ship.webm", "videos/ira.webm"];
document.getElementById('random_webm').src = src[Math.floor(Math.random() * src.length)];
};
random_webm()
I have three images or divs, there is a sound assigned to each image that plays on hover (ambience1 - ambience3). So far it works. But, as of now, the same sound plays, ambience3 to be precise, no matter if I hit image1, image2 or image3. I'm not really familiar with javascript, so I guess it's the js.
Also, I want the sound to stop, not pause, when the cursor leaves the image, and start from the beginning, when the cursor hits the area again. See code below:
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="image1">
<img class="bottom" src="dcim/20190202_100649 copy.jpg" />
<img class="top" src="dcim/20190202_100649.jpg" />
<audio id="audio1">
<source src="ambience1.mp3"/>
</audio>
</div>
<div id="image2">
<img class="bottom" src="dcim/20190202_102808 copy.jpg" />
<img class="top" src="dcim/20190202_102808.jpg" />
<audio id="audio2">
<source src="ambience2.mp3"/>
</audio>
</div>
<div id="image3">
<img class="bottom" src="dcim/20190202_101713 copy.jpg" />
<img class="top" src="dcim/20190202_101713.jpg" />
<audio id="audio3">
<source src="ambience3.mp3"/>
</audio>
</div>
<script>
var audio = $("#audio1")[0];
$("#image1").mouseenter(function() {
audio.play();
audio.loop = true;
});
$("#image1").mouseleave(function() {
audio.pause();
});
</script>
<script>
var audio = $("#audio2")[0];
$("#image2").mouseenter(function() {
audio.play();
audio.loop = true;
});
$("#image2").mouseleave(function() {
audio.pause();
});
</script>
<script>
var audio = $("#audio3")[0];
$("#image3").mouseenter(function() {
audio.play();
audio.loop = true;
});
$("#image3").mouseleave(function() {
audio.pause();
});
</script>
</body>
Try change var audio to three different names in each <script> tag (like in below snippet (which not works due to lack of images and sounds). The reason of previous behaviour was that your audio variable was global and was override by last script. Use audio.currentTime = 0; before pause to play audio from beginning
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="image1">
<img class="bottom" src="dcim/20190202_100649 copy.jpg" />
<img class="top" src="dcim/20190202_100649.jpg" />
<audio id="audio1">
<source src="ambience1.mp3"/>
</audio>
</div>
<div id="image2">
<img class="bottom" src="dcim/20190202_102808 copy.jpg" />
<img class="top" src="dcim/20190202_102808.jpg" />
<audio id="audio2">
<source src="ambience2.mp3"/>
</audio>
</div>
<div id="image3">
<img class="bottom" src="dcim/20190202_101713 copy.jpg" />
<img class="top" src="dcim/20190202_101713.jpg" />
<audio id="audio3">
<source src="ambience3.mp3"/>
</audio>
</div>
<script>
var audio1 = $("#audio1")[0];
$("#image1").mouseenter(function() {
audio1.play();
audio1.loop = true;
});
$("#image1").mouseleave(function() {
audio1.currentTime = 0;
audio1.pause();
});
</script>
<script>
var audio2 = $("#audio2")[0];
$("#image2").mouseenter(function() {
audio2.play();
audio2.loop = true;
});
$("#image2").mouseleave(function() {
audio2.currentTime = 0;
audio2.pause();
});
</script>
<script>
var audio3 = $("#audio3")[0];
$("#image3").mouseenter(function() {
audio3.play();
audio3.loop = true;
});
$("#image3").mouseleave(function() {
audio3.currentTime = 0;
audio3.pause();
});
</script>
</body>
I have a slideshow of an array of videos. I would like to have them paused when their container is not visible. I have tried several things, including variations of visibility listeners and play/pause commands. I have not had any luck getting this to work.
Here is my html:
<div id="video" class="mySlides"><video class="video" autoplay loop><source src="icx.mp4" type="video/mp4"></video></div>
<div id="widescreen" class="mySlides">
<!--<div id="written"><video autoplay><source src="written.mp4"
type="video/mp4"></video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>-->
</div>
<div id="last" class="mySlides"><video id="player" class="video" autoplay >
<source src="refresh.mp4" type="video/mp4"></video></div>
I was using a counter to loop through the array but I want the videos to start from the beginning so I am refreshing the page when refresh.mp4 ends and using the following to slide through them.
Script.
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 11000);
}
Here is my current javascript attempt to pause the video. I am open to jquery selections also. Even if it did work (which it doesn't) It would only work for 1 element. I would need it to pause all the videos that are not visible.
var videoElement = document.getElementById("player");
function handleVisibilityChange() {
if (document[hidden]) {
videoElement.pause();
} else {
videoElement.play();
}
}
HTML:
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="color:white;">×</button>
</div>
<div class="modal-body">
<video id='videoPlayer' width="100%" height="100%" controls="controls">
<source id='mp4Source' src="" type="video/mp4" />
<!--<source id='oggSource' src="movie.ogg" type="video/ogg" />-->
</video>
</div>
</div>
</div>
</div>
</div>
JS
function play(i){
var x = document.getElementById("hidden_"+i).value;
var player = document.getElementById('videoPlayer');
var mp4Vid = document.getElementById('mp4Source');
player.pause();
// Now simply set the 'src' property of the mp4Vid variable!!!!
mp4Vid.src = x;
player.load();
$('#myModal').modal('show');
}
I play a video inside the modal but when I click out side of the modal before the video completes the modal will hide but the the video continues to play
You can use the event hide.bs.modal. Check the documentation here.
$('#myModal').on('hide.bs.modal', function(){
player.pause();
})
$('#myModal').on('hidden.bs.modal', function (e) {
player.pause();
})
I have started to create my audio player and would like to control it using images (a play and a stop image).
what i have so far:
audio.html
<div id="audioPlayer">
<audio id="mediPlay" preload="none" controls="controls">
<source src="audio/Crystaligned Dream (Short Version).mp3" type="audio/mpeg">
</audio>
<img class="mediaButton" id="playBtn" src="audio/img/play.png" alt="play"/>
<img class="mediaButton" id="stopBtn" src="audio/img/stop.png" alt="stop" />
</div>
controls.js
$(document).ready(function () {
$('#playBtn').on('click', function () {
$('player').play();
}, false);
$('#stopBtn').on('click', function () {
$('player').stop();
}, false);
});
The DOM player hasn't .stop() function. You should use .pouse() instead. Also the .play() and .pause() functions do work on audio/video element.
$('#playBtn').on('click', function () {
$('audio')[0].play();
});
$('#stopBtn').on('click', function () {
$('audio')[0].pause();
});
$('#playBtn').on('click', function () {
$('audio')[0].play();
});
$('#stopBtn').on('click', function () {
$('audio')[0].pause();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="audioPlayer">
<audio id="mediPlay" preload="none" controls="controls">
<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
</audio>
<img class="mediaButton" id="playBtn" src="audio/img/play.png" alt="play"/> <img class="mediaButton" id="stopBtn" src="audio/img/stop.png" alt="stop" />
</div>
If you want to replay audio, use this code
$('audio')[0].currentTime = 0;
$('audio')[0].play();
$('#playBtn').on('click', function () {
$('audio')[0].play();
});
$('#stopBtn').on('click', function () {
$('audio')[0].pause();
});
$('#repBtn').on('click', function () {
$('audio')[0].currentTime = 0;
$('audio')[0].play();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="audioPlayer">
<audio id="mediPlay" preload="none" controls="controls">
<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
</audio>
<img class="mediaButton" id="playBtn" src="audio/img/play.png" alt="play"/>
<img class="mediaButton" id="stopBtn" src="audio/img/stop.png" alt="stop" />
<img id="repBtn" src="audio/img/stop.png" alt="replay" />
</div>