web-dev-qa-db-ja.com

たとえばグーグル広告のサイズ制限を尊重して、ビデオを含むバナー広告を作成することは可能ですか？

たとえば、一般的なサイズ制限（150kB）を尊重するAnimate CCに実装されたビデオを使用して、バナー広告を作成するにはどうすればよいですか？

JavascriptでHTML5ビデオを実装できることがわかりましたか？おそらくgif？チュートリアルやガイドは大歓迎です。

htmlhtml5-videogoogle-adwordsbanneranimate-cc
8
6754534367

はい、可能です。これは、SOのサイズ制限（6.6K圧縮）内の非常に小さい7Kビデオです。

_<!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>_

元々の答えはもっと否定的でしたが、それ以来、私たちはより多くの経験を積んでいます。

まず、アニメーションGIFが悪いです。 非常に非効率的です。確かに150kを取得できますが、色数が非常に少なく、英雄的で損失が多い 圧縮 。まったくきれいではありません。

ビデオに関しては、明示的に禁止されていませんが、HTML5広告ワード広告 含まれていない可能性があります HTML5ビデオファイル。ただし、 data uri を使用するか、ビデオの名前を_.css_に変更することで回避できます。

グーグルは将来ビデオ検出を追加するかもしれません-あなたがそれを画像に改名すれば彼らはすでにそれを検出します-しかし今のところビデオ自体は拒絶の理由ではありません。

もう1つの問題は、モバイルプラットフォームがビデオを自動再生しないことです。クリックして再生するのは簡単ですが、画像のプレースホルダー用にバイトバジェットを節約することをお勧めします。

それはサイズの主な問題を残します。

video の場合、 common 形式はMP4（H.264）です。技術的には、すべての動画広告を150Kに圧縮できます。適切なツールを使用すると、基準に達するまで品質を下げることができます。唯一の問題は、品質が許容できるかどうかです。

オーディオがあるとしても、それは難しい部分です。クォータを使いすぎないようにするには、28kbps以下のような極端なビットレートが必要です。 Googleの場合、音声もユーザーが開始する必要があります。そのため、音声なしで自動再生するか、クリックして再生するか、音量のオン/オフボタンをスクリプト化するかを選択できます。

これらは、141Kを作成するために行った手順です デモ広告 、および後で発見したいくつかの機能強化：

  1. Avidemux を使用して、スケーリングされた（右の寸法）高品質ビデオを開きます。
  2. 左側で、「ビデオ出力」をMpeg4 x264に設定し、出力形式を「MP4Muxer」に設定します。
    1. 今すぐビデオを保存して、Avidemuxがソースビデオを処理できることを確認してください。
  3. ビデオ出力のすぐ下にある[構成]ボタンをクリックします。
    1. [全般]タブで、[スレッド]を1に設定し、[品質]を32に設定します。エンコードは「一定レート係数」のままにします。
    2. [モーション]タブで、[モーション推定]を[アダマール全数検索]に設定し、[サブピクセルの絞り込み]を10に設定します。ベクター検索範囲を64に増やします。
    3. [パーティション]タブで、すべてのパーティションブロックを有効にします。
    4. [フレーム]タブで、[最大]を設定します。最大16までの参照フレーム。連続するBフレームを16に、Bフレームのバイアスを20（またはそれ以上）に、適応型のBフレームを最適に決定し、GOPサイズを最大にします。 1000まで。
    5. [分析]タブで、[格子量子化]を[常にオン]に設定します。
    6. Quantiserタブで、VarianceAQをAutoに設定します。
    7. [OK]をクリックします。
  4. メイン画面に戻ります。オーディオメニューを開く>トラックを選択します。
    1. すべてのオーディオトラックを無効（チェックを外す）にします。 [OK]をクリックします。
  5. メイン画面で、保存ボタンをクリックして、ビデオの名前を入力します。
    1. ビデオサイズを確認してください。 150KB前後でない場合は、品質を調整し（手順2.1）、再度保存します。
    2. 私のバージョン（2.6.12）では、フレームタブのBフレームバイアスにバグがあるようで、設定を変更するたびにリセットされます。
    3. ビデオサイズは150をわずかに超える場合があります。たとえば、圧縮後に152Kが147Kになる場合があります。
    4. 155kのように実際に少し上回っている場合は、Analysisのノイズリダクションを512または1024に設定して、サイズを微調整します。
    5. 完璧なビデオができたら、 変換 をデータURIに変換します。
  6. Index.htmlを作成し、doctype、_<html>_、 meta ad.size 、_<body>_、およびビデオタグを入力します。データURIをビデオsrcとして使用します。
    1. attributes とスクリプトを追加してビデオを制御します。デモでは、ビデオを自動再生とループに設定し、10秒後にループ属性を削除し、ビデオの終了をリッスンして巻き戻します。
    2. IE 11は、明示的に.pause()を呼び出すまで、永久にループすることに注意してください。
    3. すべての主要なブラウザでファイルを確認します。ファイルサイズは約200Kである必要があります。
  7. 7Zip を使用して、index.htmlをアーカイブに追加します：
    1. アーカイブ形式は「Zip」である必要があります。
    2. 圧縮レベルを「ウルトラ」に設定します。
    3. ワードサイズを256に、CPUスレッドを1に設定します。
    4. [OK]をクリックします。
  8. 保存した動画よりも少し小さいindex.Zipを取得し、HTML5画像バナーとしてGoogleAdWordsにアップロードできるようにする必要があります。

手順は、Avidemux2.6.12のデフォルトに基づいています。オプションが多すぎるため、すべてのオプションをリストすることはできませんが、x264エンコーダーはかなり安定しているため、デフォルトが変更されることはないと思います。

また、平均ビットレートを数回試しましたが、CRFは一貫してより良い結果をもたらします。

設定は、エンコード時間をより良い品質またはより小さなサイズと交換します。明らかではないかもしれませんが、シングルスレッドはバイト効率も向上させます。 153,600バイトしかない場合は、これらの小さなビットが役立ちます。

Bフレームバイアスの調整は、一般的なエンコーディングではお勧めできませんが、適度に増やすと、より多くのバイトを削減するのに役立ちます。

7-Zip 16.02の時点で、Deflateはビデオに2番目に優れた圧縮アルゴリズムであり、bzip、lzma、またはppmdよりも優れています。 Deflate64はわずかに優れていますが、Googleではサポートされていません。

7
Sheepy

ビデオHTML5でバナー広告を作成する

ビデオの上に広告、メッセージ、情報ボックス/ダイアログが表示されたHTML5ビデオタグのデモビデオを再生し、ポップアップメッセージ/広告ボックスが表示されて18秒で消えるまで8秒待ちます。

ここ 、デモ ここ を参照してください

// 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
Tính Ngô Quang

ビデオを実装するには、html5ビデオタグを使用できます

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

ただし、すべてのブラウザでサポートされているわけではありません。 .gifは実装がはるかに簡単で、ファイルも小さいはずです。再生/一時停止などのビデオ機能は提供していませんが

0
edamerau