第一步:准备工作
工欲善其事必先利其器,我们首先需要准备一个视频
第二步:html中引入视频
这里我们需要用到了video/标签,然后在source里面写视频的路径,autoplay用来使其自动播放,muted用来使其静音,loop为循环播放,依照个人意愿愿意加就加,不加拉倒哈
<div class="videocontainer">
<video class="fullscreenvideo" poster="__ROOT__/Themes/tdt/Asset/images/loginbg.jpg" id="bgvid" playsinline="" autoplay="" muted="" loop="">
<source src="__PUBLIC__/video/loginbg.mp4" type="video/mp4">
</video>
</div>
第三步:css设置,调节视频,使其适应屏幕
以上的步骤还不能满足我们的需求,这个时候我们会发现有滚动条,而且视频会遮挡我们要显示的内容,可这远远不是我们想要的结果啊,不怕,有我呢
.fullscreenvideo {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
-webkit-transition: 1s opacity;
transition: 1s opacity;
}
.videocontainer{
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -100;
}
.videocontainer:before{
content: "";
position: absolute;
width: 100%;
height: 100%;
display: block;
z-index: -1;
top: 0;
left: 0;
background: rgba(25,29,34,.65);
}
第四步:js控制视频播放速度
可以利用video的playbackRate属性来控制video的播放速度,如果要让背景视频以慢速播放的话可以加上下面的JavaScript
<script>
var video= document.getElementById('v1');
video.playbackRate = 0.5;
</script>
好嘞,快去设置你的酷炫背景吧
来源:https://www.cnblogs.com/front-girl/archive/2018/03/23/8628571.html
Chrome 在升级到 70 的时候开始对视频播放的画中画模式开始支持了,用户在浏览器 Web 页面可以通过 画中画的形式强当前画面停留在屏幕正上方,无论你在使用其他软件还是切到其他 Tab ,都可以看到当前画面
在移动端(ios和android)播放视频的时候,我们即使定义了autoplay属性,仍然不能自动播放。这是由于手机浏览器为了防止浪费用户的网络流量,在默认情况下是不允许媒体文件自动播放的,除非用户自己对浏览器进行设置才能支持autoplay。
在uc浏览器和ios微博里面,是不支持视频交互的,暂时没有办法把层级放在视频上方,IOS 必须用click事件点击之后视频才会播放,不支持自动播放 安卓环境下,视频播放会全屏播放,播放完之后不会回到原页面
DPlayer 是一个支持弹幕的 HTML5 视频播放器。支持 Bilibili 视频和 danmaku,实时视频(HTTP Live Streaming,M3U8格式)以及 FLV 格式
vue是国内最常用的前端框架,作者是尤雨溪大佬中文资料多,而且上手快,生态繁荣,是新手入门的首选框架。即将更新到3.0版本,追赶技术浪潮 进大厂就靠它啦
最近项目中需要前端播放 .ts 格式视频,捣鼓了几天学习到很多知识,也发掘了一种优秀的解决方案,项目中已存储的 .ts 切片数量众多,已经占用了NAS服务器绝大部分的资源,生成的 .m3u8 索引虽然非常小
在日常应用场景中,可能会遇到这么一个情况,需要判断用户是否完整的观看完了一部视频,在这个场景中,和视频相关的事件大体涉及到几个部分,获取视频长度,视频开始播放,暂停播放和播放结束
前端需要把视频文件的第一帧图像截取出来,并做为缩略图显示在页面上,这里需要利用HTML5中强大的画布canvas来实现该功能
这个问题如果思路错了就是个死胡同。所以我在找问题的时候趟了很多坑。思路错在我不应该使用视频的全屏,敲黑板!划重点啦!不要使用视频的全屏!(解决了问题的时候才幡然醒悟)
沉浸式视频体验,大致内容是一个页面里有几十个视频,用户点击其中一个视频时,该视频自动滑动到屏幕可视区域的顶部开始播放,并暂停其他视频,该视频滑出屏幕可视区域之后要自动暂停。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!