如何让视频在看过一次后变得模糊？

在HTML页面放置了视频，我想做出这样的任务，以显示看到的视频模糊，如果我们刷新页面，它会得到正常，没有任何覆盖我想为此放置CSS或Java脚本。如何让视频在看过一次后变得模糊？

2016-02-29 Rajeshwari

使用JS，添加一个类的视频，一旦它被观看：

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

我假设我们是在谈论一个<video>标签。

来源

2016-02-29 06:51:32

联事件的属性这是一个很好的解决方案。应该指出的是，它不能在Internet Explorer上工作。另外，在Firefox中，直到版本35才能正常工作。http://www.w3schools.com/cssref/css3_pr_filter.asp –

@RichardHamilton你是对的。 –

但我确实喜欢答案，所以+1 –

这取决于你的意思是看过一次。你的意思是视频是否结束或视频是否开始播放。

JavaScript有检测视频是否已经开始或结束的方法。

这里是一个例子。比方说，你有视频列表

<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; 
    }); 
}

另外，您可以添加像这样

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

来源

2016-02-29 06:51:44

如何让视频在看过一次后变得模糊？

回答

相关问题