我们在传奇的《哈利·波特》报纸等页面上创建视频。
创造最大的沉浸感！
为此，我们需要一个简短的视频（预览），该视频将循环播放且没有声音。 第二个视频是带有声音的常规视频，当您将鼠标悬停，单击或滚动时，该视频将打开。
页面中嵌入的HTML代码：
<div class="smartVideo graysv"> <video data-cprotate data-cprotatehover muted loop data-inits="autoplay" data-src="./test1.mp4" data-poster="./test.jpg" webkit-playsinline playsinline pip="false"></video> <video data-cprotate data-volume="1" data-src="./test2.mp4" data-poster="./test.jpg" webkit-playsinline playsinline pip="false"></video> </div>
如果您需要在视频上启用黑白滤镜，直到它打开或没有声音，
则将 2个包裹在
div中的视频标记为
smartVideo类，并
添加graysv类！
data-cprotate-告诉脚本主视频和预览视频将旋转。
data-src-视频文件的路径。
数据海报 -加载视频时显示的图片的路径。
playinline-对于在智能手机下自动运行的情况，没有它就无法启动。
pip =“ false” -这样浏览器就不会显示下载按钮。
对于第一个剪辑，我们必须将属性
Muted loop data-inits = autoplay设置为
静音 ，这意味着：如果没有声音，则循环播放，并且在屏幕上可见时自动启动。
对于第一个视频剪辑，有一个
data-cprotatehover属性 ，该
属性是可选的，它意味着将鼠标悬停在该视频上即可启动该视频。 您无需将其放在第二个视频中！
第二个视频需要指定
data-volume = 1音量，但是如果您不想要声音，则需要设置
0 。
如何在页面上进行评论的示例。要进行连接，您需要在页面上插入CSS样式：
<style> .smartVideo{ width:300px; } .smartVideo video { width:100%; z-index:0; position: absolute; top:0; left:0; user-select:none; border:0; padding:0; margin:0; vertical-align:middle; cursor:pointer; outline:none; } .smartVideo > video:first-child { position:relative; z-index:1; } .smartVideo video:not([data-inits="autoplay"]){visibility:hidden;z-index:0;} .graysv video{ -webkit-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); } .graysv.cpsound video,.graysv:hover video:not([data-mouseout]){ -webkit-filter: none; -ms-filter: none; filter: none; } </style>
我们需要一个JS文件，该文件需要在结束
body标签之前连接。
<script src="/smartvideo.js"></script>
下载源剧本急忙搜集！
如果有很多兴趣，那么可以使用各种设置制作一个成熟的库并将其放在github上！
同样，如果有人对JavaScript的技术方面感兴趣，请编写，我可以在下一篇文章中绘制JavaScript代码（尽管在此之前我必须将其梳理并清理干净！:-)
smartVideo的要点：
- 可在智能手机和平板电脑上使用。
- 如果有人切换到呼叫或在浏览器选项卡之间切换，则自动停止视频。
- 滚动页面时自动停止或启动视频！
- 仅在视频在视线范围内时才开始下载视频和海报。
PS：如何为屏幕阅读器格式化smartVideo html代码？
此致，自由职业者CMS cPortfolio的登陆设计师的创建者