html5-video 相关问题

我想使用视频作为我网站的背景。我有这个：我想使用视频作为我网站的背景。我有这个： <video autoplay muted loop preload="none" poster="{{ asset('img/web/intro_video_placeholder.webp') }}" loading="lazy"> <source src="{{ asset('img/web/video/intro_video.webm') }}" type="video/webm"> </video> 它工作得很好，但我想要实现的是延迟加载。我想先加载 css 和 js，然后开始加载视频，而且，如果加载了视频，我想自动播放它。上面的代码无法正常工作，并且它会在慢速互联网连接上阻止我的 css 和 js（视频大约有 9MB）。有什么解决办法吗？非常感谢。你的代码看起来不错。但有一个小小的改变。如果存在 preload，则忽略 autoplay 属性。 document.addEventListener("DOMContentLoaded", function() { var lazyVideo = document.getElementById('lazyVideo'); // Function to play the video }); <video id="lazyVideo" muted loop preload="none" poster="{{ asset('img/web/intro_video_placeholder.webp') }}" loading="lazy"> <source src="{{ asset('img/web/video/intro_video.webm') }}" type="video/webm"> </video>

html html5-video lazy-loading

回答 1 投票 0

Flask Streaming mp4 视频在 Windows 上完美运行，但在手机上不行，无法弄清楚

我正在尝试创建小型烧瓶应用程序，它可以从我的监控摄像头传输 mp4。我使用这个 mp4 链接 (https://www.w3schools.com/html/movie.mp4) 进行测试，因为它工作完美并且可以在...

android iphone flask video-streaming html5-video

回答 1 投票 0

打开视频弹出窗口或单击视频上的播放按钮时暂停所有 html 卡的动画

我有两张卡，一张是包含视频的小卡，另一张是包含标题和说明的大卡。小卡嵌套在大卡内。我想要的是当我...

javascript html css twitter-bootstrap html5-video

回答 2 投票 0

具有不同文件的 HTML5 视频，用于响应式设计

是否有 HTML5 视频的 srcset 等效项？目前，我在一个页面上有一个视频网格，连续 3 个，共 5 行（总共 15 个视频），如下所示：是否有相当于 HTML5 视频的 srcset ？目前我在一个页面上有一个视频网格，连续 3 个，共 5 行（总共 15 个视频），都是这样的： <video width="400" poster="14.jpg" loop="loop" autoplay="autoplay"> <source src="14.webm" type="video/webm"> <source src="14.mp4" type="video/mp4"> </video> 我遇到的问题是我的页面请求大约为 6mb。由于我的视频网格是 3 宽... <div class="row"> <video width="400" poster="13.jpg" loop="loop" autoplay="autoplay"> <source src="13.webm" type="video/webm"> <source src="13.mp4" type="video/mp4"> </video> <video width="400" poster="14.jpg" loop="loop" autoplay="autoplay"> <source src="14.webm" type="video/webm"> <source src="14.mp4" type="video/mp4"> </video> <video width="400" poster="15.jpg" loop="loop" autoplay="autoplay"> <source src="15.webm" type="video/webm"> <source src="15.mp4" type="video/mp4"> </video> </div> ...很明显，对于屏幕尺寸约为 320 像素的小型设备，我不需要 3 400 像素的视频文件，我可以使用较小的视频文件。我正要开始重构来加载我的页面，如下所示： <div class="row"> <video width="400" poster="13.jpg" loop="loop" autoplay="autoplay"> </video> <video width="400" poster="14.jpg" loop="loop" autoplay="autoplay"> </video> <video width="400" poster="15.jpg" loop="loop" autoplay="autoplay"> </video> </div> 然后使用 JavaScript 基本上说： if($(window).width() < 500){ $('#video13').append('<source src="13-SMALL-FILE.mp4" type="video/mp4">') }else{ $('#video13').append('<source src="13-LARGE-FILE.mp4" type="video/mp4">') } 这是一个好的选择还是有更好的方法或已经存在的库？经过大量谷歌搜索后，我没有找到非常有用的信息。视频和图片元素长期以来都支持 media 属性，因此您可以执行多种操作，包括： <video playsinline muted preload="metadata"> <source src="" type="" media="(orientation: landscape)"> <source src="" type="" media="(orientation: portrait)"> </video> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#using_the_media_attribute_with_video 仅当屏幕的 @media 为 max-width 时，您才可以使用 500px 查询来应用特定宽度： @media screen and (max-width:500px){ video { width:100% !important; } }

javascript video responsive-design html5-video pageload

回答 2 投票 0

HTML 视频无法正常工作

我正在尝试让视频在本地播放，但它不起作用。该文件是“wildlife.mp4”，但是它无法播放，它只是一个空白的视频框？任何帮助将不胜感激，谢谢。我正在尝试让视频在本地播放，但它不起作用。该文件是“wildlife.mp4”，但是它无法播放，它只是一个空白的视频框？任何帮助将不胜感激，谢谢。 <!DOCTYPE html> <html> <head> <title>video</title> </head> <body> <video width="320" height="240" controls> <source src="wildlife.mp4" type="video/mp4"> <source src="wildlife.ogg" type="video/ogg"> Your browser does not support the video tag. </body> </html> 视频标签未关闭。如果您希望视频自动播放，请添加自动播放。 <!DOCTYPE html> <html> <head> <title>video</title> </head> <body> <video width="320" autoplay="autoplay" height="240" controls> <source src="wildlife.mp4" type="video/mp4"> <source src="wildlife.ogg" type="video/ogg"> Your browser does not support the video tag. </video> </body> </html> 如果您在 Windows 上运行脚本，浏览器可以检查与视频关联的文件类型 (wild.mp4)。在我的系统 (W7) 上，我单击视频文件上的“属性”，并将“文件类型”从 VLC（这是我系统上的默认设置）更改为 Windows Media Player，所有内容均已排序。希望这有帮助。在本地计算机上运行 html 文件时，嵌入、对象和视频根本无法与较新的浏览器一起使用！您可能在服务器上有该文件？！这是一个大错过！怎么解决这个问题？旧版 IE 确实可以处理这个问题。问候 [电子邮件受保护]

html html5-video

回答 3 投票 0

客户端 H.264 (MP4) 视频压缩/编码

我目前正在开发一款具有多种功能的应用程序，其中一个关键功能是客户视频录制。到目前为止，我们还没有为 vi 实现任何压缩技术...

reactjs video html5-video h.264 video-encoding

回答 1 投票 0

html5-video 相关问题

最新问题