coverr.co:免费的视频素材网站 不死鸟 • August 24, 2017 • 每日好站 之前介绍过Videezy:免费的视频素材网站,今天介绍的是同样资源丰富并且基于CC0协议,可以随意编辑修改或用于商业用途。如果你是一个视频编辑者,经常需要引用一些视频素材制作视频上传到优酷、腾讯、youtube等平台,又担心所用的素材侵权,那么coverr.co 是不错的选择。coverr.co官网http://www.coverr.co/coverr.co的视频提供免费的下载,下载下来是一个压缩包文件,里面包含了mp4、ogv、webm格式的视频,以及一个jpg格式的封面。Coverr.co上发布的所有视频都可以免费使用。您可以将它们用于商业和非商业目的。您不需要向Videographer或Coverr.co要求许可或提供信用,尽管如有可能,您将不胜感激。 更准确地说,Coverr.co授权您在未经视频摄录师或Coverr.co的许可或归属的情况下,免费下载,复制,修改,执行和使用Coverr.co的视频,包括商业目的,不可撤销的非排他性版权许可。 此许可证不包括从Coverr.co编译视频来复制类似或竞争的服务的权利。coverr.co提供了代码便于你将从网站下载的视频用作于网页背景,对于不懂代码的人很有帮助,该代码可以实现网页全屏视频背景。html代码<div class="homepage-hero-module"> <div class="video-container"> <div class="filter"></div> <video autoplay loop class="fillWidth"> <source src="PATH_TO_MP4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser. <source src="PATH_TO_WEBM" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser. </video> <div class="poster hidden"> <img src="PATH_TO_JPEG" alt=""> </div> </div> </div> CSS代码.homepage-hero-module { border-right: none; border-left: none; position: relative; } .no-video .video-container video, .touch .video-container video { display: none; } .no-video .video-container .poster, .touch .video-container .poster { display: block !important; } .video-container { position: relative; bottom: 0%; left: 0%; height: 100%; width: 100%; overflow: hidden; background: #000; } .video-container .poster img { width: 100%; bottom: 0; position: absolute; } .video-container .filter { z-index: 100; position: absolute; background: rgba(0, 0, 0, 0.4); width: 100%; } .video-container video { position: absolute; z-index: 0; bottom: 0; } .video-container video.fillWidth { width: 100%; } JS代码//jQuery is required to run this code $( document ).ready(function() { scaleVideoContainer(); initBannerVideoSize('.video-container .poster img'); initBannerVideoSize('.video-container .filter'); initBannerVideoSize('.video-container video'); $(window).on('resize', function() { scaleVideoContainer(); scaleBannerVideoSize('.video-container .poster img'); scaleBannerVideoSize('.video-container .filter'); scaleBannerVideoSize('.video-container video'); }); }); function scaleVideoContainer() { var height = $(window).height() + 5; var unitHeight = parseInt(height) + 'px'; $('.homepage-hero-module').css('height',unitHeight); } function initBannerVideoSize(element){ $(element).each(function(){ $(this).data('height', $(this).height()); $(this).data('width', $(this).width()); }); scaleBannerVideoSize(element); } function scaleBannerVideoSize(element){ var windowWidth = $(window).width(), windowHeight = $(window).height() + 5, videoWidth, videoHeight; // console.log(windowHeight); $(element).each(function(){ var videoAspectRatio = $(this).data('height')/$(this).data('width'); $(this).width(windowWidth); if(windowWidth < 1000){ videoHeight = windowHeight; videoWidth = videoHeight / videoAspectRatio; $(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth) / 2 + 'px'}); $(this).width(videoWidth).height(videoHeight); } $('.homepage-hero-module .video-container video').addClass('fadeIn animated'); }); } Last Modified: December 26, 2019 Archives QR Code Tip