如何在播放主视频时在html视频标签上插入图像。 [英] How can I insert image on html video tag while playing the main video.

问题描述

使用时间功能。我们可以在视频上查看广告。

by using time function . we can view ads on videos.

推荐答案

我想以下列方式解决问题（作为第一次尝试）：



创建一个视频标签，然后使用一些javascript代码引用视频标签。

创建一个画布并在其中绘制视频内容，然后创建另一个画布抓住广告形象。在期望的时间，我们将在第一个画布内容上绘制第二个画布内容。

代码应如下所示：

I would think to solve the problem in the following way (as a first attempt):

Create a video tag, then make reference to the video tag using some javascript code.
Create a canvas and draw the video content in it, then create another canvas which will hold the advertisement image. On the desired time we will draw the second canvas content on top of the first one.
The code should look like below:

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

(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 = this; //cache (function loop() { var currentTime = Date.now() - startTime; if (!

这篇关于如何在播放主视频时在html视频标签上插入图像。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！