草庐IT

video-background

全部标签

video - 我可以预加载多个视频资源以在同一个 HTML5 <video> 元素中加载吗?

我正在制定一个Web应用程序的详细信息,该应用程序涉及顺序加载一长串(非常短的)视频剪辑,一个接一个,用户偶尔会输入建立新的视频剪辑加载方向.我希望能够让浏览器一次预加载五个视频剪辑。然而,我们目前网站的运作方式是通过单个视频元素,该元素的src属性通过JavaScript不断更新。有没有一种直接的方法可以让浏览器预加载多个视频剪辑,即使我最终将它们全部(一次一个)加载到同一个视频元素中? 最佳答案 您可以通过创建在浏览器中预加载图像JavaScript中的标记,并设置其src属性。尽管任何规范都没有要求,但所有浏览器都会下载图像并

css - 哪种方式加载巨大的图像(canvas vs img vs background-image)?

我想要什么目前我有一张4000x4000的png图片.使用后tinypng.org它变成了一个288KB的文件。现在我想要以最快的方式加载图像,将其放置在DOM中并能够在其上绘制大量Canvas。我测试了一些,结果令我震惊。我测试了什么我做了3次测试,只检查加载速度。(423毫秒)(138毫秒)(501毫秒)CSSbackground-image标签是最快的。问题那么,使用是不是一种不好的做法?标记来显示巨大的(背景)图像并使用一些肮脏的CSS以便能够在其上绘制Canvas?还是在我的情况下使用Canvas更好,而不用担心加载时间更长? 最佳答案

Android HTML5 视频 - 单击播放时有效,但不是 video.play()

我了解Android上的html5视频无法自动播放。就目前而言,只有当用户点击播放按钮时,我的视频才能在设备上运行。$(function(){varvideo=document.getElementById('video');video.play();});不过它可以在我的桌面上运行。为什么这行不通?点击播放和使用.play()有什么区别? 最佳答案 由于浏览器阻止调用window.open()的相同原因,它不会起作用,因为允许它允许Web开发人员颠覆用户不自动播放媒体(或打开弹出窗口)的偏好).点击播放和使用此方法之间的区别正是您

html - 在 HTML5 Video 中,如何从一个长视频中播放一个小片段?

我想展示一个超过10分钟的长视频文件中的一个小片段。这段视频将从90秒的时间偏移/寻道时间开始,持续时间为45秒。我怎样才能做到这一点? 最佳答案 HTML5视频还支持MediaFragmentURI规范这将允许您仅指定要播放的视频片段。使用它相当简单:将在30秒标记开始播放视频并在45秒标记暂停视频。 关于html-在HTML5Video中,如何从一个长视频中播放一个小片段?,我们在StackOverflow上找到一个类似的问题: https://stack

video - HTML5 视频缩放模式?

我正在尝试制作全屏HTML背景,这很简单。但是因为HTML5视频在保持宽高比的同时调整了大小以适合容器,所以我无法获得想要的效果。HTML5视频是否有不同的缩放模式?我想缩放以填充和裁剪。这是在Flash中完成的预期效果:http://www.caviarcontent.com/如果您调整窗口大小,您会看到它会缩放和裁剪。你永远不会得到黑条。感谢您的帮助! 最佳答案 使用CSS实现此目的的另一种方法是使用object-fit属性。这适用于视频或img元素video{object-fit:cover;}http://caniuse.c

html - "body {background-color}"适用于 HTML 但不适用于 CSS

我能够在内联中为HTML正文设置背景色属性命令但当将相同的命令移动到外部样式表时则不会。一个具体的例子下面给出。在test1.html中,背景颜色设置为“蓝色:在HTML中。文件test2.html与test1.html相同,除了命令被注释掉。文件style.css包含背景规范-color以及元素(以测试浏览器是否真的阅读样式表)。第一个测试在蓝色背景下生成橙色文本。第二次测试产生橙色文本,但背景为白色。我已经在Firefox21、Chrome19和浏览器9;都给出相同的结果。这是怎么回事?任何帮助将不胜感激。这是三个示例文件:test1.html:body{background-co

css - HTML5 搜索输入 : No Background Image in Chrome?

我一直在努力尝试让Chrome为我的search输入设置背景图片。Firefox没有问题,但我担心这是因为它将输入视为常规文本输入。这根本不可能吗?试试这个作为演示:​input[type="search"]{background:transparenturl(http://google.com/intl/en_ALL/images/srpr/logo1w.png)no-repeat00;}​​​​​​如果它工作正常,它应该将Google的Logo(或其中的一部分)作为“搜索”输入的背景图像。但是正如您在Chrome中查看此内容时所看到的那样,它不起作用。任何想法,或者这只是HTML5

javascript - 在页面的 ajax 加载部分初始化 Video.js 播放器

视频播放器实际上加载正常。我的实际问题是当我使用AJAX刷新页面的某些部分并且这些部分包含视频播放器时,HTML5播放器加载正常,但不是Video.js自定义它的部分。video.js文件加载在页面的头部。我已阅读文档,但找不到如何在已加载的页面上初始化视频播放器。当加载我的包含视频的页面部分以使视频播放器正确加载Video.js时,是否没有可以调用的myPlayer.initialize()函数?我认为video.js文件仅在页面加载时自动执行此操作。感谢您宝贵的帮助! 最佳答案 我遇到了同样的问题。我的场景:通过ajax加载带有

html - 如何组合 CSS "text-shadow"和 "background-image: -webkit-gradient"

我正在尝试使用CSS文本阴影以及文本阴影和背景图像的组合在Chrome/Safari中实现渐变+文本阴影效果:-webkit-gradient,请参见示例blw。我只能应用其中一种效果(如果我添加阴影,渐变就会消失。我做错了什么?h1{font-size:100px;background-image:-webkit-gradient(linear,lefttop,leftbottom,from(white),to(black));-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:01

video - 更改正在 HTML5 视频中播放的视频

我正在使用HTML5中的标签在网络浏览器上播放视频...(我对这个新功能印象深刻)是否有通过Javascript更改正在播放的视频的功能?假设当我从列表中选择另一个视频时,将调用一个Javascript函数,该函数将包含MyVideo.VideoLocation=//locationofnewvideotobeplayed行中的内容。请问这样可以吗?感谢和问候,Krt_马耳他 最佳答案 Webkit要求您在更改源后调用“load()”:videoTag.src="newVideo";videoTag.load();videoTag.