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
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>
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.
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>
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 ?
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