Jump to content
Search Community

responsive html5 banner with video

AlexeyBoldin test

By AlexeyBoldin
in Banner Animation

Moderator Tag
 Share
Go to solution Solved by AlexeyBoldin,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

1
2
Page 2 of 2  

Recommended Posts

AlexeyBoldin test

AlexeyBoldin

Posted
  • Author
Posted

 

Wow =) , it works! But what is the difference?

Can you explain it to me? This is the same code, or you made some modifications?

 

 

Surely that's something you can push back to them. If you are creating new formats they must provide working examples.

 

How about picking another format that has a video and a template and cannibalizing some of it to use in this new format?

 

 

This is Yandex. With them it is very difficult to negotiate about something.

In any case, I sent them what I've got, let's see what they say.

Link to comment
Share on other sites
joe_midi test

joe_midi

Posted
Posted

Here is the code I used:

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="https://awaps.yandex.net/data/lib/adsdk.js"></script>
  <meta charset="utf-8" name="ad.size" content="width=320,height=268">
  <title>320x268_YandexVideo</title>
  <!-- write your code here -->
  <script>
    function getUrlParam(name) {
      name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
      var regex = new RegExp("[\\?&]" + name + "=([^]*)"),
      results = regex.exec(location.search);
      return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }
  </script>
  <style>
    body {
      margin: 0px;
      height: 100%;
    }

    #video {
      border: 1px solid gray;
      width: 100% !important;
      height: 100% !important;
      min-width: 320px;
      max-width: 1080px;
      min-height: 268px;
      max-height: 328px;
      object-fit: contain;
      position: fixed;
      margin: auto;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      display: block;
      background-color:rgba(00, 00, 00, 1.0);
    }
  </style>
</head>
<body>
  <a id="click1_area" href="#" target="_blank" style="width: 100%; height: 100%; cursor: pointer; position: absolute; z-index: 9;">
    <video id="video" width="400" height="224" controls>
      <!--<source src="video_for_banner.mp4" type="video/mp4">-->
    </video>
  </a>
  <script>
    var video = document.getElementById('video');
    video.addEventListener('canplaythrough', function() {
      // Do something.
      this.play();
    });
    video.src = getUrlParam('video1');

    document.getElementById('click1_area').href = getUrlParam('link1');
    home.expandableBannerAPI.close();
  </script>
</body>
</html>
  • Like 1
Link to comment
Share on other sites
somnamblst test

somnamblst

Posted
Posted

Since this is a Animate authored banner ad with video question, I thought I would jump in and add that I just got around to checking out what is new in the Animate 2017 release, and I'll be damned if they did not give us an HTML5 video component.

 

 

  • The Source parameter allows us to select video file from a local location or provide any URL to play the video (mp4, ogg, ogv, or webm formats). 

 

https://helpx.adobe.com/animate/using/using-components-in-animate-cc.html

 

and a virtual camera tool.

 

https://helpx.adobe.com/animate/how-to/virtual-camera.html

  • Like 2
Link to comment
Share on other sites
  • Solution
AlexeyBoldin test

AlexeyBoldin

Posted
  • Author
  • Solution
Posted
After a few corrections Yandex accepted this code:

 




<!DOCTYPE html>

<html>

<head>

  <script type="text/javascript" src="https://awaps.yandex.net/data/lib/adsdk.js"></script>

  <meta charset="utf-8" name="ad.size" content="width=320,height=268">

  <title>320x268_YandexVideo</title>

  <!-- write your code here -->

  <script>

    function getUrlParam(name) {

      name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");

      var regex = new RegExp("[\\?&]" + name + "=([^]*)"),

      results = regex.exec(location.search);

      return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));

    }

  </script>

  <style>

    body {

      margin: 0px;

      height: 100%;

      overflow: hidden;

      cursor: pointer; 

    }


    #video {

      border: 1px solid gray;

      width: 100% !important;

      height: 100% !important;

      min-width: 320px;

      max-width: 1080px;

      min-height: 268px;

      max-height: 328px;

      object-fit: contain;

      position: fixed;

      margin: auto;

      left: 0;

      right: 0;

      bottom: 0;

      top: 0;

      display: block;

      background-color:rgba(00, 00, 00, 1.0);

    }

  </style>

</head>

<body>


    <video id="video" width="400" height="224" controls>

      <!--<source src="video_for_banner.mp4" type="video/mp4">-->

    </video>


  <script>

    var video = document.getElementById('video');

    video.addEventListener('canplaythrough', function() {

      this.pause();

    });

    video.src = getUrlParam('video1');



    document.getElementById('video').onclick = function() {

        if (video.paused && ! video.ended) {

        video.play();

        video.setAttribute("controls", "controls") ;

        return;

    }

    window.open(getUrlParam("link1"));

    homeExpandableMobileBannerAPI.close();

    };


    document.body.addEventListener('click', function (event) {

    if (event.target.tagName.toLowerCase() !== 'body') {

        return;

    }

    onCLickBody()

    }, true);


    function onCLickBody(){

    window.open(getUrlParam("link1"));

    homeExpandableMobileBannerAPI.close();

    }

  </script>

</body>

</html>


Link to comment
Share on other sites
1
2
Page 2 of 2  

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...