I'd like to be able to change the video source before it starts to play based on a media query using javascript/jquery. The premise being, if the screen resolution is below a certain value then the device is mobile and lets assume it is on a mobile network so load the lower resolution video.
The following works, but I get a 'glitch' as the original video loads before jQuery does it's thing and changes the video source.
I've looked into using the media query built into the html5 video tag but understand that it has limited support.
<style>
#mobile-indicator {
display: none;
}
#media (max-width: 767px) {
#mobile-indicator {
display: block;
}
}
</style>
the html is as follows
<script type="text/javascript">
(function($){
$(window).on("load",function(e){
$('video source').each(function(){
var isMobile = $('#mobile-indicator').is(':visible');
if (isMobile == true){
var videoSrc = ($(this).attr('src'));
var videoSmall = $(this).attr('src').replace('.mp4', '_small.mp4');
$(this).attr('src', videoSmall);
$("video")[0].load();
//console.log(newExt);
}
});
});
})(jQuery);
</script>
<div class="bg_video">
<video class="video" poster="<?PHP echo $bg_image; ?>" id="bg_video" playsinline autoplay muted loop >
<source src="https://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4" type="video/mp4">
</video>
</div>
<div id="mobile-indicator"></div>
Any ideas how I can do the media query before the video starts to play?
Cheers,
Philip
I've created a codepen that demonstrates the problem
[UPDATE based on VC.One's solution]
<script type="text/javascript">
(function($){
$(window).on("load",function(e){
$('video source').each(function(){
var isMobile = $('#mobile-indicator').is(':visible');
var videoSrc = 'images/backgrounds/<?PHP echo $bg_video; ?>';
if (isMobile == true){
var videoSmall = videoSrc.replace('.mp4', '_small.mp4');
$(this).attr('src', videoSmall);
}else{
$(this).attr('src', videoSrc);
}
$("video")[0].load();
});
});
})(jQuery);
</script>
<div class="bg_video">
<video class="video" <?PHP echo ($bg_image !="") ? 'poster="' . $bg_image . '"' : ''; ?>" id="bg_video" playsinline autoplay muted loop >
<source src="images/backgrounds/null.mp4" type="video/mp4">
</video>
</div>
It seems a simple If/Else statement works. Let me know how it goes.
(1) HTML : Use a dummy URL like null.mp4 so nothing is loaded by video tag at start.
<div class="bg_video">
<video class="video" poster="<?PHP echo $bg_image; ?>" id="bg_video" playsinline autoplay muted loop >
<source src="null.mp4" type="video/mp4">
</video>
</div>
(2) JS : Use an If/Else statement in your JavaScript code.
(function($)
{
$(window).on("load",function(e)
{
$('video source').each(function()
{
var isMobile = $('#mobile-indicator').is(':visible');
if (isMobile == true)
{
alert("is mobile");
var videoSmall = "https://www.w3schools.com/html/mov_bbb.mp4";
$(this).attr('src', videoSmall);
}
else
{
alert("not mobile");
var videoLarge = "https://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4";
$(this).attr('src', videoLarge);
}
$("video")[0].load();
});
});
})(jQuery);
Related
I have made attempts to create an overlay play button for my HTML 5 video. I have created an example on Jfiddle - click here-This works fine. I have tried to integrate my fiddle onto my site however i am receiving the error message Cannot read property 'paused' of undefined. Believe this has something to do with the structure of my code. Below is a snippet of how my code is set up.
$('.video').click(function () {
if($(this).children(".video").get(0).paused){
$(this).children(".video").get(0).play();
$(this).children(".playpause").fadeOut();
}else{
$(this).children(".video").get(0).pause();
$(this).children(".playpause").fadeIn();
}
});
HTML
<div class="col-md-12 video">
<video muted loop controls poster="/assets/casestudies/marketingandcomms/ukcoffeeweek/coffee-video-poster.gif">
<source src="/assets/videos/coffee-video.mp4" type="video/mp4">
</video>
<div class="playpause"></div>
Can anyone point me in the right direction ?
you use two different html structures with wrong JQuery Selectors.
try the Following html and Jquery Codes:
DEMO: https://jsfiddle.net/9ewogtwL/150/
<div class="wrapper">
<video class="video">
<source src="http://e14aaeb709f7cde1ae68-a1d0a134a31b545b257b15f8a8ba5726.r70.cf3.rackcdn.com/projects/31432/1427815464209-bf74131a7528d0ea5ce8c0710f530bb5/1280x720.mp4" type="video/mp4" />
</video>
<div class="playpause"></div>
</div>
with this JQuery Code:
$('.wrapper').click(function () {
var videoEl = $(this).find("video").get(0);
if( videoEl.paused ){
videoEl.play();
$(this).find(".playpause").fadeOut();
}else{
videoEl.pause();
$(this).find(".playpause").fadeIn();
}
});
DEMO URL: JSBIN-DEMO
JQUERY
$('.video').on('click',function () {
$player=$(this).find("video")[0];
if($player.paused){
$player.play();
$(this).find('.playpause').fadeOut();
}
else{
$player.pause();
$(this).find('.playpause').fadeIn();
}
});
HTML
<div class="col-md-12 video">
<video muted loop controls poster="">
<source src="http://www.w3schools.com/tags/movie.mp4" type="video/mp4">
</video>
<div class="playpause">PLAY</div>
<div>
I am using flowplayer and I setup the video by this way and I added 2 buttons for fastFwd and rewind
<div class="flowplayer" data-swf="flow/flowplayer.swf">
<video id="myvideo" class="myvideo">
<source type="video/mp4" src=""/>
</video>
</div>
<div> <a id="fastFwd" onClick="seek();return false;">fastFwd</a>
<a id="rewind" onClick="seek();return false;">rewind</a>
</div>
<script>
$("#forward, #rewind").click(function (seek) {
if (api.ready) {
var target = $(this).attr("myvideo") == "forward" ? 5 : -5;
api.seek(api.video.time + target);
}
});
</script>
But the buttons doesn't work
It looks like your ID's are not correct. Either you'll need to change your HTML to have the same ID's in your jquery, or change the ones in your jquery to have the same ones in your HTML.
<script>
$("#fastFwd, #rewind").click(function (seek) {
if (api.ready) {
var target = $(this).attr("myvideo") == "forward" ? 5 : -5;
api.seek(api.video.time + target);
}
});
</script>
I ran into a little problem right now and i can't find a solution.
HTML:
<video id="vid" controls >
<source src=".mp4" type="video/mp4">
<source src="HEYE.mp4" type="video/mp4">
</video>
JavaScript:
function ChangeVideo(){
if(click%2 == 0){
document.getElementById('vid').src="Troll.mp4";
click++;
}else{
document.getElementById('vid').src="HEYE.mp4";
click++;
}
}
Button:
<button onclick="ChangeVideo()">Change video</button>
the problem is that i dont get it to change video when i click the button.
My to videos in my map is named "HEYE.mp4" and "Troll.mp4"
function ChangeVideo(){
var vid = document.getElementById('vid');
vid.src = click%2 ? "HEYE.mp4" : "Troll.mp4";
vid.load();
vid.play();
click++;
}
I have a video in popup. When use below code on popup close, the video doesn't stop buffering and have the old video reference when reopen it. Here is the code:
HTML:
<div id="w_oPopup">
<div id="w_oPlayer">
<video id="w_oVideoFrame" autoplay loop controls tabindex="0" width="946" height="532" poster="">
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>
</div>
</div>
JS:
$('.w_cExitPopupButton').bind('click', onPopupBlockerClick);
function onPopupBlockerClick(e) {
$('#w_oPopupBlocker').hide();
//Here my tries...
$('#w_oVideoFrame')[0].pause();
$('#w_oVideoFrame')[0].src = "";
}
Try using the pause() method to stop the audio and set the audio path again and play. There is no stop() method to stop the video.
function stop_audio(){
$('#w_oVideoFrame')[0].pause();
$('#w_oVideoFrame')[0].src = " ";
}
function play_audio(){
$('#w_oVideoFrame')[0].src = "path of audio";
$('#w_oVideoFrame')[0].play();
}
use the currentTime on the selected video element
video.currentTime = 0;
Is it possible somehow in jQuery to hide specific video or source element?
<video id="one" autoplay width="300px" height="300px">
<source src="media/sample3.mp4" type="video/mp4" />
</video>
<video id="two" autoplay width="300px" height="300px">
<source src="media/sample.mp4" />
</video>
I would like to play sample3, for example, for 1 minute, then pause sample3, hide it, show sample.mp4 and play that video.
Any suggestons?
My code which I tryed:
var video = $('video').get(0).pause();
if ($('video').get(0).paused) {
$('video').get(0).hide();
};
but the $('video').get(0).hide(); throws Uncaught TypeError: Object #<HTMLVideoElement> has no method 'hide'
I would try something like this
$(document).ready(function(){
var one = $('#one');
var two = $('#two');
play_sound(one);
setTimeout(function(){
pause_sound(one);
one.hide();
two.show();
play_sound(two);
setTimeout(function(){
pause_sound(two);
}, 180*1000);
}, 60*1000);
});
function play_sound(var file){
file.play();
}
function pause_sound(var file){
file.pause();
}