How to view the CPF in several different places every X seconds on the video screen using HTML5?

Question

Does anyone have any idea or suggestion how to make the CPF run every X seconds on the HTML5 video screen?

<video width="320" height="240" controls>
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
   Your browser does not support the video tag.
</video>

Answer 1

Well there we go, I found quite different your question, and so far also did not understand what is the use of passing the CPF in front of some video, anyway the process is simple and follows what colleagues have already said in the commisaries.

Here’s my simple code (think of a version 0.0.0.1), as you did not specify if you were using any framework as Jquery I did with pure Javascript, but adapting to another is not difficult, on the contrary.

CSS
Well as colleagues have already indicated you should split your elements into two layers, in my case assigns an ID to the <video> tag and said it sits below (z-index: -1) of all elements together it assigns another ID in the <div> tag that contains the text of the CPF is on top (z-index: 3;) besides saying that it has an absolute position on the screen or that it is not stuck to the elements that are around it, the rest is firula as color, background and edges, I put this to visualize the element moving on the screen.

<style>
#seuVideo { z-index -1px; border: 1px solid #000000; }
#seuCPF { width: 150px; height: 20px; z-index: 3; position: absolute; top: 0; left: 0; color: #FFFFFF; background-color: #FF0000; }
</style>

HTML
HTML is the simplest part of the code I mixed HTML5 tags in the case of video with HTML4 tags like div, line break and central ally, plus inline css (to hide text and only show at the right time), was lazy to create everything cute since for our example it still serves, I tried to centralize the video, because inside Javascript there is a "move" for him to know if it is located inside the HTML so I did it on purpose.

<br><br>
<center>
 <video width="320" height="240" id="seuVideo" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
 </video>
 <div id="seuCPF" style="display: none;">XXX.XXXX.XX-XX</div>
</center> 

Javascript
Now we come to the soul of the whole thing, Javascript, well we have 3 processes in Javascript that I describe in more detail below:

• Knowing whether the video is 'playing' or not
• Calculate video position and text size
• Make the "loop" of random text positions

So I will try to explain better within the code itself:

<script>
// Define o tempo para cada aparição do texto (no caso meio segundo)
var seg = 500;
// Faz a leitura de todas as propriedades do elemento <video> 
var video = document.getElementById("seuVideo");
// Faz a leitura de todas as propriedades do elemento <div> 
var texto = document.getElementById("seuCPF");
// Variável usada para controle do "loop"
var time = null;

// Função que pega a posição (X/Y) de qualquer elemento na tela
// Bastando informar seu respectivo ID
function Posicao(elemento) {
 var xP = 0;
 var yP = 0;

 while (elemento) {
  xP += (elemento.offsetLeft - elemento.scrollLeft + elemento.clientLeft);
  yP += (elemento.offsetTop - elemento.scrollTop + elemento.clientTop);
  elemento =elemento.offsetParent;
 }

 return { x: xP, y: yP };
}

// Função que gera um número aleatório entre um intervalo
function PosicaoAleatoria(min, max) {
 return Math.floor(Math.random() * (max - min + 1)) + min;
}

// Função que sorteia número aleatórios de acordo com o tempo definido
// Além de posicionar o texto nessa posição  
function RandTexto(wMin, wMax, hMin, hMax) {
 var rX = PosicaoAleatoria(wMin, wMax);
 var rY = PosicaoAleatoria(hMin, hMax);

 texto.style.left = (rX + "px");
 texto.style.top = (rY + "px");

 time = window.setTimeout("javascript:RandTexto(" + wMin + "," + wMax + "," + hMin + "," + hMax + ");", seg);
}

// "Ouve" se o video está sendo executado
video.addEventListener("play", function(e) { 
 // Pega a posição da "caixa do vídeo" na tela
 var videoPos = Posicao(video);

 // Captura o tamanho do vídeo
 var vWidth = video.videoWidth;
 var vHeight = video.videoHeight;

 // Pega o tamanho da caixa de texto
 texto.style.display = "";
 var tWidth = texto.clientWidth;
 var tHeight = texto.clientHeight;

 // Calcula o local onde é possível apresentar o texto
 var rWidth = ((videoPos.x + vWidth) - tWidth);
 var rHeight = ((videoPos.y + vHeight) - tHeight);

 // Inicia o "loop" para criar o piscar o pisca
 RandTexto(videoPos.x, rWidth, videoPos.y, rHeight);
});

// "Ouve" se o vídeo foi pausado e limpa os eventos
video.addEventListener("pause", function(e) {
 window.clearInterval(time);
 texto.style.display = "none";
});
</script>

Just save as "video.html" and open to test, I tested using Chorme, Firefox and IE and at least for me it worked correctly.