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 ?
Related
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!
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>
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
I'm trying to change the source of a video from selecting a link. So when the link is selected on the page, it will change the video overhead to the source of another video, sort of like a playlist.
This is the code for my html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Videos</title>
<link rel="stylesheet" href="VideosPage.css">
<script src="jquery-1.7.2.min.js" type="text/javascript"> </script>
<script type="text/javascript">
</script>
<video id="first_video" width="800" height="450" controls="controls" style="margin-left:380px; padding:10px; border:1px solid black;">
<source src="video.mp4" type="video.mp4" />
</video>
<br />
<a> Other Video </a>
Check out the HTML standard:
http://www.whatwg.org/specs/web-apps/current-work/#video.
There's a couple of solutions you could use. One is loading the next video sequentially, like a playlist:
<script type="text/javascript">
var nextVideo = "path/of/next/video.mp4";
var videoPlayer = document.getElementById('video');
videoPlayer.onend = function(){
videoPlayer.src = nextVideo;
}
</script>
<video id="videoPlayer" src="path/of/current/video.mp4" autoplay autobuffer controls />
Then, making a link to change it would be as simple as (for example):
$("a.change_link").click(function(){
videoPlayer.src = nextVideo;
});
in <source src="video.mp4" type="video.mp4" /> line type="video.mp4" is wrong you cant place this type of value here
here's is the some example of type : video/mp3, video/ogg, video/wbem.
To achieve what you are asking for, if you stick the video path in say the alt of the link, you can then reference it and stick that into the src of the video onclick with some simple jquery.
jsfiddle
Modified html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Videos</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" href="VideosPage.css">
<script src="jquery-1.7.2.min.js" type="text/javascript"> </script>
<script type="text/javascript">
</script>
<video id="first_video" width="800" height="450" controls="controls" style="margin-left:380px; padding:10px; border:1px solid black;">
<source src="video.mp4" type="video/mp3" />
</video>
<br />
<a alt="video2.mp4" id="other"> Other Video </a>
Some jquery:
$('#other').click( function() {
$('#first_video').children('source').attr('src',$(this).attr('alt'))
});