如何使用HTML5在視頻中插入圖像

我正在考慮在播放的HTML5視頻中插入廣告圖像。我是HTML5新手。所以，無法真正想出一種包含此功能的方法。如何使用HTML5在視頻中插入圖像

如果視頻長1分鐘。我應該能夠在36秒內停止視頻並顯示該圖像5秒鐘並自動移動到視頻。

是否有該庫或該功能的其他預構建設置？

2012-10-03 AppSensei

這可以通過HTML5 Video API實現。基本上你想要做的是在第36秒暫停視頻，用圖像覆蓋它，然後在5秒後移除圖像並再次播放視頻。

這裏是你如何能做到這樣一個例子：

var video; // acquire video 

function PerformCheck() { 
    var curTime = parseInt(video.currentTime, 10); 
    if (curTime < 36) { 
     setTimeout(PerformCheck, 200); 
    } else { 
     video.pause(); 
     PlayCommercial(); 
    } 
} 

function PlayCommercial() { 
    // TODO: Display image overlay 
    setTimeout(ResumeVideo, 5000); 
} 

function ResumeVideo() { 
    // TODO: Remove image overlay 
    video.play(); 
}

所以你一旦開始您的視頻開始執行檢查上面的例子。如果用戶這樣做，那麼訂閱視頻事件。

video.onplay = PerformCheck();

來源

2012-10-03 13:58:56

幾乎沒有什麼不能用JavaScript來完成的。
一些建議：
使用Javascript啓動計時器t1（36Sec）使用setTimeout();。
然後，在回調函數中，
1）使用document.getElementById('myvideotag').pause();（OR）暫停視頻類似的方法。
2）改變CSS顯示圖像，然後啓動一第二定時器T2（5秒），這將改變圖像的CSS回隱形/顯示：無
3）播放/恢復使用document.getElementById('myvideotag').play();

視頻這只是一個踢起動器。你必須做你的家庭作業的其餘部分！ StackOverflow的鼓勵你收集所需的信息，並嘗試一下ATLEAST一些點

來源

2012-10-03 14:05:32 Nokia808Freak

嗯..我明白了。謝謝 – AppSensei

我認爲，解決以下列方式問題（作爲第一次嘗試）：

創建視頻標籤，然後使用一些JavaScript代碼參考視頻標籤。
創建一個畫布並在其中繪製視頻內容，然後創建另一個畫布來容納廣告圖像。在所需的時間內，我們將在第一個畫布上繪製第二個畫布內容。

的代碼應該如下：

var startTime = Date.now(); 
$(function() { 
    var canvas = document.getElementById('canvas'); 
    var canvas2 = document.createElement('canvas');  
    canvas2.setAttribute('id', 'canvas2'); 
    var ctx = canvas.getContext('2d'); 
    var ctx2 = canvas2.getContext('2d'); 
    var img = new Image(); 
    img.src = "..."; 
    img.onload = function() { 
     ctx2.drawImage(img); 
    } 

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

    video.addEventListener('play', function() { 
     var $this = this; //cache 
     (function loop() { 
      var currentTime = Date.now() - startTime; 
      if (!$this.paused && !$this.ended) { 
       if (currentTime > 3600) { 
        ctx.drawImage(canvas2, 0, canvas.height - 100); 
       } else { 
        document.removeElementById('canvas2'); 
       }      

       ctx.drawImage($this, 0, 0); 
       setTimeout(loop, 1000/30); // drawing at 30fps 
      } 
     })(); 
    }, 0); 
});

我找到了一個不錯的徹底在html5doctor的過程解釋的文章。但是我沒有檢查他們的解決方案。提供的解決方案並不完整，我只描繪了我將如何解決問題的基本思路。

來源

2012-10-03 14:14:27

如何使用HTML5在視頻中插入圖像

回答

相關問題