web-dev-qa-db-fra.com

Est-il possible de créer une bannière contenant une vidéo en respectant la taille limite, par exemple, des annonces google?

Comment créer une bannière publicitaire avec vidéo implémentée dans, par exemple, Animate CC, dans le respect des limites de taille habituelles (150 Ko)?

J'ai découvert que vous pouvez implémenter une vidéo HTML5 avec Javascript? Peut-être un gif? Tous les tutoriels ou guides sont les bienvenus.

html5html5-videogoogle-adwordsbanneranimate-cc
7
6754534367

Oui c'est possible. Voici une très petite vidéo 7K, dans les limites de la taille de SO (6,6K compressé):

<!DOCTYPE html><html>
<meta charset="utf-8"><meta name="ad.size" content="width=320,height=100">
<body>
<script>
setTimeout( function(){
   var v = document.querySelector( '#video' );
   v.removeAttribute('loop'); /* Stop loop after 1 seconds (set below) */
   v.addEventListener('ended', function(){
      v.currentTime = 0.6; /* Rewind to 0.6 sec */
      v.pause(); /* Stop video for IE 11 */
   });
 }, 1000 );
</script>
<video id="video" width="272" height="48" onclick='this.play()' autoplay loop src='data:video/mp4;base64,AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1wNDEAAAAIZnJlZQAAFg5tZGF0AAACsAYF//+s3EXpvebZSLeWLNgg2SPu73gyNjQgLSBjb3JlIDE0OCByMjY2NSBhMDFlMzM5IC0gSC4yNjQvTVBFRy00IEFWQyBjb2RlYyAtIENvcHlsZWZ0IDIwMDMtMjAxNiAtIGh0dHA6Ly93d3cudmlkZW9sYW4ub3JnL3gyNjQuaHRtbCAtIG9wdGlvbnM6IGNhYmFjPTEgcmVmPTE2IGRlYmxvY2s9MTowOjAgYW5hbHlzZT0weDM6MHgxMzMgbWU9dW1oIHN1Ym1lPTEwIHBzeT0xIHBzeV9yZD0xLjAwOjAuMDAgbWl4ZWRfcmVmPTEgbWVfcmFuZ2U9MjQgY2hyb21hX21lPTEgdHJlbGxpcz0yIDh4OGRjdD0xIGNxbT0wIGRlYWR6b25lPTIxLDExIGZhc3RfcHNraXA9MSBjaHJvbWFfcXBfb2Zmc2V0PS0yIHRocmVhZHM9MSBsb29rYWhlYWRfdGhyZWFkcz0xIHNsaWNlZF90aHJlYWRzPTAgbnI9MCBkZWNpbWF0ZT0xIGludGVybGFjZWQ9MCBibHVyYXlfY29tcGF0PTAgY29uc3RyYWluZWRfaW50cmE9MCBiZnJhbWVzPTggYl9weXJhbWlkPTIgYl9hZGFwdD0yIGJfYmlhcz0wIGRpcmVjdD0zIHdlaWdodGI9MSBvcGVuX2dvcD0wIHdlaWdodHA9MiBrZXlpbnQ9MjUwIGtleWludF9taW49MjUgc2NlbmVjdXQ9NDAgaW50cmFfcmVmcmVzaD0wIHJjX2xvb2thaGVhZD02MCByYz1jcmYgbWJ0cmVlPTEgY3JmPTI4LjAgcWNvbXA9MC42MCBxcG1pbj0wIHFwbWF4PTY5IHFwc3RlcD00IGlwX3JhdGlvPTEuNDAgYXE9MToxLjAwAIAAAAF4ZYiBAA///uTPuZY+yUglG4ugbAGtaMFpBZ45QLlYjDmM786yt3JhmUaqq/WpH2SdEEQrn9UggFVflQ/uiVqLqbzW5teh0pwLNNXI36BPkFyuzCAVjGbR7n3RtztnvW9HEP5+M0FPsa/2YGPlLsXH00yABQAZTN+V8x8wcGdRNZ5nibjjWYuirJ+a2MW3xZHqYt0fJUJdtqAYR1gr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'>
</body></html>

La réponse initiale était plus négative, mais nous avons depuis acquis plus d'expérience.

Premièrement, les images GIF animées sont mauvaises. C'est very inefficient. Vous pouvez obtenir 150k, bien sûr, mais avec un très faible nombre de couleurs et des effets héroïques et avec pertes compression . Pas jolie du tout.

En ce qui concerne la vidéo, elle n'est pas explicitement interdite, mais HTML5 adsword ad ne peut pas contenir fichiers vidéo HTML5. Cependant, vous pouvez le contourner avec data uri ou en renommant la vidéo en .css.

Il est possible que Google ajoute la détection vidéo à l'avenir - ils la détectent déjà si vous la renommez en une image - mais pour le moment, la vidéo elle-même n'est pas un motif de rejet.

Un autre problème est que les plates-formes mobiles ne lisent pas automatiquement la vidéo. Il est simple de les rendre cliquables, mais vous voudrez peut-être économiser du budget sur plusieurs octets pour l'espace réservé à l'image.

Cela laisse le principal problème de taille.

Pour vidéo , le format commun est MP4 (H.264). Techniquement, toutes les annonces vidéo peuvent être compressées à 150 Ko, avec les bons outils, vous réduisez simplement la qualité jusqu'à ce qu'elle atteigne le but. La seule question est de savoir si la qualité sera acceptable.

Audio, le cas échéant, est la partie la plus difficile. Vous avez besoin d'un débit extrême tel que 28 kbps ou moins pour ne pas consommer trop de quota. Pour Google, l'audio doit également être initié par l'utilisateur. Donc, vous avez beaucoup de choix pour une lecture automatique sans audio, ou cliquez pour jouer, ou écrivez un script pour activer/désactiver un volume.

Voici les étapes que j'ai suivies pour préparer un 141K annonce de démonstration , ainsi que certaines améliorations découvertes plus tard:

  1. Ouvrez la vidéo redimensionnée (bonne dimension) mais de haute qualité avec Avidemux .
  2. Sur la gauche, définissez "Sortie vidéo" sur Mpeg4 x264 et définissez Format de sortie sur "MP4 Muxer".
    1. Essayez de sauvegarder la vidéo maintenant pour vous assurer que Avidemux peut gérer la vidéo source.
  3. Cliquez sur le bouton "Configurer" juste en dessous de Sortie vidéo.
    1. Onglet Général, définissez Threads sur 1, puis définissez la Qualité sur 32. Conserve le codage en tant que "Facteur de débit constant".
    2. Onglet Mouvement, définissez Estimation du mouvement sur "Recherche exhaustive Hadamard" et Affinement du sous-pixel sur 10. Augmentez la plage de recherche de vecteur à 64.
    3. Onglet Partition, activez tous les blocs de partition.
    4. Onglet Cadre, définissez Max. Cadres de référence à 16, Max. Images B consécutives à 16, Bias d'image B à 20 (ou plus), décision adaptative de l'image B sur Optimal et taille maximale du groupe d'images. à 1000.
    5. Analyse, définissez Trellis Quantization sur Always On.
    6. Quantiser, définissez Variance AQ sur Auto.
    7. Cliquez sur OK.
  4. Retour à l'écran principal. Ouvrir le menu Audio> Sélectionner une piste.
    1. Désactiver (décocher) toutes les pistes audio. Cliquez sur OK.
  5. Sur l’écran principal, cliquez sur le bouton Enregistrer et entrez un nom pour la vidéo.
    1. Vérifiez la taille de la vidéo. S'il ne se situe pas autour de 150 Ko, ajustez Qualité (étape 2.1) et enregistrez à nouveau.
    2. Dans ma version (2.6.12), le biais de B-frame de l'onglet Frame semble être buggé et sera réinitialisé à chaque fois que je change de configuration.
    3. La taille de la vidéo peut être légèrement supérieure à 150, par exemple 152K peut devenir 147K après compression.
    4. Si cela dépasse un peu, comme 155k, définissez la réduction de bruit de Analysis sur 512 ou 1024 pour affiner la taille.
    5. Une fois que nous avons la vidéo parfaite, convertissez-la en données uri.
  6. Créez index.html, mettez dans doctype, <html>, meta ad.size , <body> et la balise video. Utilisez les données en tant que vidéo src.
    1. Ajoutez attributs et des scripts pour contrôler la vidéo. Dans la démo, nous configurons la vidéo sur la lecture automatique et la boucle, puis supprimons l'attribut de boucle après 10 secondes et écoutons la vidéo pour la rembobiner.
    2. Notez que IE 11 restera en boucle jusqu'à ce que nous appelions explicitement .pause().
    3. Vérifiez le fichier dans tous les principaux navigateurs. La taille du fichier doit être d'environ 200K.
  7. En utilisant 7Zip , ajoutez index.html pour archiver:
    1. Le format d'archive doit être "Zip".
    2. Définissez le niveau de compression sur "Ultra".
    3. Définissez la taille du mot sur 256 et les threads du processeur sur 1.
    4. Cliquez sur OK.
  8. Vous devriez obtenir un index.Zip qui est un peu plus petit que la vidéo enregistrée et que vous pouvez télécharger sur Google Adwords en tant que bannière d'image HTML5!

Les étapes sont basées sur les valeurs par défaut d’Avidemux 2.6.12. Je ne peux pas lister toutes les options car il y en a trop, mais comme l'encodeur x264 est assez stable, je ne m'attends pas à ce que les valeurs par défaut changent.

Nous avons également essayé le débit moyen plusieurs fois, mais le CRF donne toujours de meilleurs résultats.

Les paramètres négocient le temps d'encodage pour une meilleure qualité ou une taille plus petite. Cela n’est peut-être pas évident, mais un seul thread augmente également l’efficacité des octets. Lorsque vous ne disposez que de 153 600 octets, ces petits bits sont utiles.

Il n'est pas conseillé d'ajuster le biais de la trame B dans l'encodage général, mais une augmentation modérée aide réellement à réduire le nombre d'octets.

En date de 7-Zip 16.02, Deflate est le deuxième meilleur algorithme de compression vidéo - meilleur que bzip, lzma ou ppmd. Deflate64 est légèrement meilleur, mais n'est pas supporté par Google.

7
Sheepy

Faire une bannière avec vidéo HTML5

Démonstration de balises vidéo HTML5 avec publicité, message, zone d'information/boîte de dialogue en haut de la vidéo Lisez la vidéo et attendez jusqu'à 8 secondes lorsqu'un message contextuel/une boîte publicitaire apparaîtra et disparaîtrait au bout de 18 secondes!

S'il vous plaît se référer ici , Démo à ici

// Get the Video Object
var v=document.getElementById("myvideo");


// Show the Adv Box i.e. the DIV
function show_adv() {
        document.getElementById("my_ad").style.visibility="visible";
}

// Hide the Adv Box i.e. the DIV
function hide_adv() {
        document.getElementById("my_ad").style.visibility="hidden";
}

// Execute this for each second when playing the Video
function catch_the_frame() {
        var t;
        t = Math.round(v.currentTime); // currentTime is float; Make it whole number to check
        document.getElementById("seek_status").innerHTML="Current Time: " + t + " seconds"; // Show the current playing time in seconds
        if ( t >= 8 && t <= 18) { // Target Second when we want to show the message/ad
                show_adv(); // Show the message/ad
        }else {


                hide_adv(); // Show the message/ad
        }       
}

// Hide the video when page loaded
hide_adv();
// Handle the playing event
v.addEventListener('playing', function() {setInterval(catch_the_frame,500);}, false);
#v_area{
    float:left;
    z-index: 99;
}

#my_ad {
        position:absolute;
        width:350px;
        height:150px;
        top: 10;
        left: 10;
        font-family: Arial;
        font-size: 120%;
        background-color:rgba(255,0,0,0.2);
        z-index:100;
        color: #ff0000;
}

#close a {
        position:absolute;
        top: 5;
        left: 520;
        z-index:100;
        font-family: Arial;
        font-size: 40%;
        text-decoration: none;

}
.generic_txt{
        font-family: Droid Sans,sans-serif;
        font-size: 150%;    
        color: #0000ff;
}
.generic_txt_heading a {
    font-family: Droid Sans,sans-serif;
        font-size: 110%;    
        color: #00ff00;
        text-decoration:none;
}

.generic_txt_heading2 {
    font-family: Droid Sans,sans-serif;
        font-size: 100%;    
        color: #0000ff;
        text-decoration:none;
}
<div id="v_area">

        <div id="my_ad" style="visibility: hidden;">
           How are you? I hope you are having a Nice day. Cheers! 
           <p>Visit <a href="www.debugpoint.com">www.debugpoint.com</a> for more tutorials!
           </p><div id="close" onclick="this.parentNode.parentNode.removeChild(this.parentNode); return false;">
             <p></p><p><a href="#">[x]</a>
           </p></div>
        </div>
        
        <div>
                <video id="myvideo" controls="">
                <source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm">
                Your browser doesn't support HTML5 video. Try a different browser instead.
                </video>
        </div>

</div>
1
TinhNQ

pour implémenter des vidéos, vous pouvez utiliser le tag vidéo html5

<video>
<source src="video here" type="video/videotype">
</video>

mais ce n'est pas supporté par tous les navigateurs. Un fichier .gif devrait être beaucoup plus facile à implémenter et le fichier est également plus petit. Bien qu'il n'offre pas de fonctions vidéo telles que lecture/pause

0
edamerau