How to show images in mobile devices instead of a video background - javascript

I'm trying to get mobile devices to display an image instead of a video background. This is what I have got so far, but it doesn't work. It is still displaying video on all devices, I have tried adding the image as a background but that did not work.
Here is my code:
https://jsfiddle.net/8t17jLy0/2/
The js file with the code for the video is here:
https://pruebasvirality.000webhostapp.com/js/jquery.vidbacking.js
Video CSS:
https://pruebasvirality.000webhostapp.com/css/jquery.vidbacking.css
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- ALL CSS -->
<link rel="stylesheet" type="text/css" href="https://pruebasvirality.000webhostapp.com/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://pruebasvirality.000webhostapp.com/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="https://pruebasvirality.000webhostapp.com/css/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="https://pruebasvirality.000webhostapp.com/css/owl.theme.css">
<link rel="stylesheet" type="text/css" href="https://pruebasvirality.000webhostapp.com/css/animate.css">
<link rel="stylesheet" type="text/css" href="https://pruebasvirality.000webhostapp.com/css/slick.css">
<link rel="stylesheet" type="text/css" href="https://pruebasvirality.000webhostapp.com/css/flaticon.css">
<link rel="stylesheet" type="text/css" href="https://pruebasvirality.000webhostapp.com/css/settings.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" type="text/css" href="https://pruebasvirality.000webhostapp.com/css/style.css" >
<link rel="stylesheet" type="text/css" href="https://pruebasvirality.000webhostapp.com/css/preset.css" >
<link rel="stylesheet" type="text/css" href="https://pruebasvirality.000webhostapp.com/css/responsive.css">
</head>
<body>
<!--BANNER VIDEO BG START-->
<section >
<div class="cid-qTkA127IK8 mbr-fullscreen">
<!--<iframe width="100%" height="100vh" src="https://www.youtube.com/embed/dfokqepD5NY?controls=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="cid-qTkA127IK8 vidbacking mbr-fullscreen"></iframe>-->
<video poster="https://pruebasvirality.000webhostapp.com/images/bg/bg-home-mobile.jpg" autoplay muted class="cid-qTkA127IK8 vidbacking mbr-fullscreen" media="(min-width: 990px)">
<source src="" type="video/webm">
<source src="https://pruebasvirality.000webhostapp.com/videos/hero.mp4" type="video/mp4">
</video>
<picture>
<source media="(min-width: 768px) and (max-width: 1030px)" srcset="images/bg/bg-home-mobile.jpg">
<source media="(max-width: 768px)" srcset="https://pruebasvirality.000webhostapp.com/images/bg/bg-home-mobile.jpg">
<img class="mobile-image" src="images/Goodstuff-Office-Mobile-Header.jpg" alt="" />
</picture>
</div>
<div class="mbr-overlay" style="opacity: 0.4; background-color: rgb(35, 35, 35);"></div>
<div class="mouseSlider">
<img src="https://pruebasvirality.000webhostapp.com/images/mouse.png" alt="">
<img src="https://pruebasvirality.000webhostapp.com/images/mouseh.png" alt="">
</div>
</section>
<!-- ALL JS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://pruebasvirality.000webhostapp.com/js/bootstrap.js"></script>
<script type="text/javascript" src="https://pruebasvirality.000webhostapp.com/js/owl.carousel.js"></script>
<script type="text/javascript" src="https://pruebasvirality.000webhostapp.com/js/slick.js"></script>
<script type="text/javascript" src="https://pruebasvirality.000webhostapp.com/js/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="https://pruebasvirality.000webhostapp.com/js/jquery.themepunch.tools.min.js"></script>
<script type="text/javascript" src="https://pruebasvirality.000webhostapp.com/js/theme.js"></script>
<script src="https://pruebasvirality.000webhostapp.com/js/jquery.vidbacking.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('body').vidbacking({
'masked': true
});
});
</script>
</body>
</html>```

You could check if your on mobile with this:
var isMobile = false; //initiate as false
// device detection
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent)
|| /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) {
isMobile = true;
}
Then maby something like:
if (isMobile) {
$("body > section cid-qTkA127IK8").append('
<picture>
<source media="(min-width: 768px) and (max-width: 1030px)" srcset="images/bg/bg-home-mobile.jpg">
<source media="(max-width: 768px)" srcset="https://pruebasvirality.000webhostapp.com/images/bg/bg-home-mobile.jpg">
<img class="mobile-image" src="images/Goodstuff-Office-Mobile-Header.jpg" alt="" />
</picture>');
} else {
$("body > section cid-qTkA127IK8").append('
<video poster="https://pruebasvirality.000webhostapp.com/images/bg/bg-home-mobile.jpg" autoplay muted class="cid-qTkA127IK8 vidbacking mbr-fullscreen" media="(min-width: 990px)">
<source src="" type="video/webm">
<source src="https://pruebasvirality.000webhostapp.com/videos/hero.mp4" type="video/mp4">
</video>');
}
I hope this is what your looking for! Otherwise please let me know!

Related

Uncaught Reference Error: Mosaic is not defined

I am interested in using this MosaicJS plugin. The instructions seemed straight forward, so I tried to copy the basic implementation.
$('#myMosaic').Mosaic();
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mosaic/0.131/jquery.mosaic.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-mosaic/0.131/jquery.mosaic.css" />
</head>
<body>
<div id="myMosaic">
<img src="https://placeimg.com/640/480/all" width="400" height="350" />
<img src="https://placeimg.com/640/480/all" width="320" height="200" />
<img src="https://placeimg.com/640/480/all" width="870" height="420" />
<img src="https://placeimg.com/640/480/all" width="442" height="922" />
</div>
When I did this, I get an error related to the JS script section:
Uncaught ReferenceError: Mosaic is not defined at (index):131
Anyone else had this issue? I made a proper link to the actual jquery mosaic files in the HTML head section. What sort of solutions can be implemented? Thanks!
Try this.
$(document).ready(function(){
$('#myMosaic').Mosaic();
});
Just used the jquery-mosaic CDN.
$('#myMosaic').Mosaic();
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mosaic/0.131/jquery.mosaic.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-mosaic/0.131/jquery.mosaic.css" />
</head>
<body>
<div id="myMosaic">
<img src="https://placeimg.com/640/480/all" width="400" height="350" />
<img src="https://placeimg.com/640/450/all" width="320" height="200" />
<img src="https://placeimg.com/900/800/all" width="870" height="420" />
<img src="https://placeimg.com/1000/1000/all" width="442" height="922" />
</div>

Image to play sound onclick

I'm trying to make a song play when I click on an image. everytime I do it using the solutions on the here Either the image doesn't show, the audio doesn't play, or both. I don't understand what my issue is and could use any help.
My HTML
`
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<meta charset="utf-8">
<title>#F7D64B</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css"
href="https://csshake.surge.sh/csshake.min.css">
</head>
<body>
<script>
var audio = new Audio('Music/song.wav');
function myAudioFunction
<script>
<center>
<audio id="audio" src="Music/song.wav"></audio>
<a onclick="document.getElementById("audio").play();">
<img src="assets/a.png" width=550 height=550 class="shake-slow shake-
constant">
</a>
</center>
</body>
<footer>
<!-- art by #woun404-->
<!-- #F7D64B -->
</footer>
</html>`
Here's a working example:
document.getElementById('play').addEventListener('click', function (e) {
e.preventDefault();
document.getElementById('audio').play();
});
<audio id="audio" src="http://www.soundboard.com/handler/DownLoadTrack.ashx?cliptitle=Never+Gonna+Give+You+Up-+Original&filename=mz/Mzg1ODMxNTIzMzg1ODM3_JzthsfvUY24.MP3"></audio>
<a href="#" id="play">
<img src="assets/a.png" width=550 height=550 class="shake-slow shake-
constant">
</a>
Using JavaScript only would look like this:
<body>
<center>
<audio id="audio" src="Music/song.wav"></audio>
<img id="img" src="assets/a.png" width=550 height=550 class="shake-slow shake-
constant">
</center>
<script>
document.getElementById("img").addEventListener("click", function(){
document.getElementById("audio").play();
});
<script>
</body>
It is advised to use JavaScript for big projects since it works way faster.

HTML5 video tag Firefox and jQuery controls Bug

Don't find why the controls of my video tag doesn't work on firefox when i put the jquery.min.js file link on my page...
Do you have an idea ?
when the jquery file link is remove it's work on all browser but i need to use jquery for magnific-popup so can't be remove.
the code look like this :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><% if (pageId != 'index') { %><%= pageTitle %> - <% } %><%= siteName %></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="canonical" href="<%= siteRootUrl %>" >
<link rel="stylesheet" href="./css/magnific-popup.css">
</head>
<body class="page-<%= pageId %>">
<video class="videos" controls="true" poster="./images/poster_inu.jpg" data-description="video1">
<source src="./images/inu.mp4" type="video/mp4">
<source src="./images/inu.ogg" type="video/ogg">
<source src="./images/inu.webm" type="video/webm">
</video>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="./js/jquery.magnific-popup.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>

My videojs Vast player failed to load video flash ads

As you can see the examples here https://github.com/theonion/videojs-vast-plugin,the player plays video ad before the main video.But when I put the urls offered by my advertisers in my own HTML page,no ad and I have to click the play button then the main video will start.This is the code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Video.js VAST Example</title>
<!--<link href="http://vjs.zencdn.net/4.7.1/video-js.css" rel="stylesheet">-->
<link rel="stylesheet" href="css/video-js.css">
<link rel="stylesheet" href="videojs.vast.css">
<link href="lib/videojs-contrib-ads/videojs.ads.css" rel="stylesheet" type="text/css">
<link href="videojs.vast.css" rel="stylesheet" type="text/css">
<script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>
<style>
.example-video-container {
position: absolute;
top: 30px;
left: 50%;
margin-left: -315px;
}
#vid2 {
position: absolute;
top: 30px;
}
</style>
<!--[if lt IE 9]><script src="lib/es5.js"></script><![endif]-->
<!--<script src="http://vjs.zencdn.net/4.7.1/video.js"></script>-->
<script src="js/video.js"></script>
<script src="lib/videojs-contrib-ads/videojs.ads.js"></script>
<script src="lib/vast-client.js"></script>
<script src="videojs.vast.js"></script>
</head>
<body>
<div class="example-video-container">
<video id="vid2" class="video-js vjs-default-skin" autoplay controls preload="auto"
poster=""
data-setup='{}'
width='710'
height='500'
>
<source src="v1.mp4" type='video/mp4'>
<!--<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg'>-->
<p>Video Playback Not Supported</p>
</video>
</div>
<script type="text/javascript">
console.log(returnCitySN["cip"]+','+returnCitySN["cname"]);
videojs('vid2',{}, function () {
var timestamp=Math.round(new Date().getTime()/1000);
console.log(timestamp);
var player = this;
player.ads();
player.vast({
url:'https://p.algovid.com/vpvast?p=99974938&cb=' + timestamp + '&d=https%3A%2F%2Fh5.xcloudgame.com&w=710&h=500'
});
player.on('readyforpreroll',function(){
player.ads.startLinearAdMode();
console.log('adsstart');
player.one('ended', function() {
player.ads.endLinearAdMode();
console.log('adsend');
});
});
});
</script>
</body>
</html>
And the xml file return this.
<VAST version="2.0">
<Ad id="VPAID">
<InLine>
<AdSystem version="1.0">Cedato</AdSystem>
<AdTitle>Cedato VPAID Ad Manager</AdTitle>
<Impression />
<Creatives>
<Creative sequence="1">
<Linear>
<Duration>00:00:30</Duration>
<MediaFiles>
<MediaFile delivery="progressive" width="710" height="500" scalable="1" type="application/x-shockwave-flash" apiFramework="VPAID">https://c.algovid.com/player/cedato_vpw_ima_101.82.swf?vp=378&p=99974938&sid=&w=710&h=500&h=500&w=710&pv=102.83&d=https%3A%2F%2Fh5%2Excloudgame%2Ecom</MediaFile>
<MediaFile delivery="progressive" width="710" height="500" scalable="1" type="application/javascript" apiFramework="VPAID">https://c.algovid.com/player/cedato_vpaid_102.83.js?p=99974938&sid=&w=710&h=500&h=500&w=710&pv=102.83&d=https%3A%2F%2Fh5%2Excloudgame%2Ecom</MediaFile>
</MediaFiles>
</Linear>
</Creative>
</Creatives>
</InLine>
</Ad>
</VAST>
Is there anyone can tell me how to fix this?
Afaig, the videojs-vast-plugin isn't able to play VPAID.
You will need for example the videojs-vast-vpaid plugin.
Unfortunately I wasn't able to play the resource, 'cause:
AD ERROR: VAST Error: on VPAIDAdUnitWrapper.waitForEvent, timeout while waiting for event 'AdLoaded'
but this could be caused by the ad-server configuration (aka my referrer might not be accepted), so you need to find out yourself.
You will find examples for the videojs-vast-vpaid plugin on github, but here is what i did:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Video.js VAST Example</title>
<!-- VideoJs required styles-->
<link rel="stylesheet" type="text/css" href="//mailonline.github.io/videojs-vast-vpaid/demo/videojs_4/video-js.css"/>
<!-- VideoJs.vast.vpaid required styles-->
<link rel="stylesheet" type="text/css" href="//mailonline.github.io/videojs-vast-vpaid/styles/videojs.vast.vpaid.css"/>
<!-- DEMO required styles-->
<link rel="stylesheet" type="text/css" href="//mailonline.github.io/videojs-vast-vpaid/demo/styles/demo.css"/>
<!-- Web Fonts -->
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<script type="text/javascript">
// this is mandatory for IE8 !!!!!
document.createElement('video');
document.createElement('audio');
document.createElement('track');
</script>
<!-- VideoJs required scripts-->
<script type="text/javascript" src="//mailonline.github.io/videojs-vast-vpaid/demo/videojs_4/video.js"></script>
<!-- VideoJs.vast.vpaid required scripts-->
<script type="text/javascript" src="//mailonline.github.io/videojs-vast-vpaid/scripts/es5-shim.js"></script>
<script type="text/javascript" src="//mailonline.github.io/videojs-vast-vpaid/scripts/ie8fix.js"></script>
<script type="text/javascript" src="//mailonline.github.io/videojs-vast-vpaid/scripts/videojs_4.vast.vpaid.js"></script>
<script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>
</head>
<body>
<div class="example-video-container">
<video id="vid2" class="video-js vjs-default-skin" autoplay controls preload="auto" poster="" data-setup='{}' width='710' height='500'>
<source src="oceans.mp4" type='video/mp4'>
<p>Video Playback Not Supported</p>
</video>
</div>
<script type="text/javascript">
console.log(returnCitySN["cip"]+','+returnCitySN["cname"]);
var timestamp = Math.round(new Date().getTime()/1000);
var vjs = videojs('vid2',{}, function () {
var player = this;
var vastPlugin = player.vastClient({
adTagUrl: '//p.algovid.com/vpvast?p=99974938&cb=' + timestamp + '&d=https%3A%2F%2Fh5.xcloudgame.com&w=710&h=500',
//adTagUrl: '//rtr.innovid.com/r1.5554946ab01d97.36996823;cb=%25%CACHEBUSTER%25%25',
playAdAlways: true,
adCancelTimeout: 60000,
vpaidFlashLoaderPath: './VPAIDFlash.swf'
});
player.on('reset', function () {
console.log('vast-plugin enabled - ' + vastPlugin.isEnabled() ? 'true' : 'false')
if (!vastPlugin.isEnabled()) {
vastPlugin.enable();
} else {
vastAd.disable();
}
});
});
</script>
</body>
</html>
A resource which works and I used for testing: http://rtr.innovid.com/r1.5554946ab01d97.36996823;cb=%25%CACHEBUSTER%25%25
The config might not be perfect - I'm relatively little familiar with this player.
Hope this was helpfull somehow and have a nice day.
Unfortunately I cannot run tests at the moment, but from your description of the issue maybe this parameter needs to be updated d=https%3A%2F%2Fh5.xcloudgame.com ?

jQuery Fade-In Not working

So here's my problem, I want an image to appear after a delay of 4 seconds, but this just doesn't work, can you help? Below the codes I have;
html (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
#font-face { font-family: DayZ; src: url('DayZ.ttf'); }
h3 {
color: #961515;
font-size: 32px;
text-align: center;
font-family: DayZ
}
</style>
<meta charset="utf-8">
<title>Welcome to DayZ</title>
<link rel="shortcut icon" href="http://dayzgame.com/assets/img/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/fadein.css">
<script src="scripts/fadein.js"></script>
<script src="scripts/button_fade.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<audio autoplay>
<source src="intro.mp3" type="audio/mpeg">
<source src="intro.ogg" type="audio/ogg">
<embed height="50" width="100" src="horse.mp3">
</audio>
<div id="vertical"></div>
<div id="logo"></div>
</div>
//this is the code for the image to display
<img class="delayImg" delayedSrc="http://i.imgur.com/XH9NTK6.png" />
</body>
</html>
CSS (fadein.css):
.delayImg {opacity:0;}
JavaScript (button_fade.js):
$(document).ready(function() {
$(".delayImg").each(function() {
this.onload = function() {
$(this).animate({opacity: 1}, 4000);
};
this.src = this.getAttribute("delayedSrc");
});
});
You need to load the scripts in this order:
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="scripts/fadein.js"></script>
<script src="scripts/button_fade.js"></script>
$(document).ready(function() {
$(".delayImg").each(function() {
$(this).onload = function() {
$(this).animate({opacity: 1}, 4000);
};
$(this).src = $(this).getAttribute("delayedSrc");
});
});
use $(this) insted of just this

Categories