CODEWITHSUNDEEP
csshtmlvideoblur
Rajeshwari
Rajeshwari

Reputation: 9

How to make the video blured after seen once?

On HTML page the video is put, I want to make such kind of task that shows seen videos blur and if we refresh page it will get normal without any overlay i wan to put css or java script for that.

Upvotes: 0

Views: 39

Answers (2)

Richard Hamilton
Richard Hamilton

Reputation: 26434

It depends on what you mean be seen once. Do you mean if the video has ended or if the video has started playing.

JavaScript has methods for detecting whether the video has started or ended.

Here is an example. Let's say you have a list of videos

<video id="my-video">
  <source src="movie1.mp4" type="video/mp4">
</video>

<video id="video2">
  <source src="movie1.mp4" type="video/mp4">
</video>

var videos = document.getElementsByTagName("video");
for (var i = 0; i < videos.length; i++) {
    videos[i].onended = function() {
        video.style.opacity = 0.5;
    });
}

Alternatively you can add inline event-attributes like so

<video id="my-video" onended="blurVideo()">

Upvotes: 0

Sean Stopnik
Sean Stopnik

Reputation: 1868

Using JS, add a class to the video once its been watched:

.video--watched {
  -webkit-filter: blur(20px);
  filter: blur(20px);
}

I am assuming we are talking about a <video> tag.

Upvotes: 2

Related Questions