html5-video 相关问题

网络浏览器上全屏模式视频的热点叠加

我编写了一些代码来显示视频叠加热点。但是，当我将视频全屏显示时，热点不再可见或不可单击。我尝试在全屏模式下检查元素...

MP4 视频无法在 Safari iPhone 上播放

显示问题的示例视频：https://gget.it/io64/h264test13576.mp4 - 你可以在 Safari 上播放吗？ 我在 HTML 页面上有一个视频 显示问题的示例视频：https://gget.it/io64/h264test13576.mp4 - 你可以在 Safari 上播放吗？ 我在 HTML 页面上有一个视频 <video controls><source src="/files/test.mp4"></video> 它可以在 PC（Firefox、Chrome 等）上运行，但遗憾的是它不能在 iPhone Safari 上运行（我手头没有，所以很难调试）：不是视频，而是灰色背景。 阻止 MP4 视频在 iPhone 版 Safari 上播放的常见原因有哪些？ 注意：我尝试过各种方法，例如： controls => controls="true" 如HTML5 视频标签在 Safari、iPhone 和 iPad 中不起作用（不重复） 中所述 添加playsinline 从<video ...><source src="..."></video>更改为<video ... src="..."> 但是问题依然存在。 Safari 不喜欢 moov 原子不在文件开头。 ffprobe -v trace -i h264test13576.mp4 2>&1 | grep -e 'mdat' -e 'moov' [mov,mp4,m4a,3gp,3g2,mj2 @ 0x14a704930] type:'mdat' parent:'root' sz: 592695 56 597025 [mov,mp4,m4a,3gp,3g2,mj2 @ 0x14a704930] type:'moov' parent:'root' sz: 4282 592751 597025 [mov,mp4,m4a,3gp,3g2,mj2 @ 0x14a704930] type:'mvhd' parent:'moov' sz: 108 8 4274 [mov,mp4,m4a,3gp,3g2,mj2 @ 0x14a704930] type:'trak' parent:'moov' sz: 1943 116 4274 [mov,mp4,m4a,3gp,3g2,mj2 @ 0x14a704930] type:'trak' parent:'moov' sz: 2105 2059 4274 [mov,mp4,m4a,3gp,3g2,mj2 @ 0x14a704930] type:'udta' parent:'moov' sz: 118 4164 4274 这解决了它： ffmpeg -i h264test13576.mp4 -movflags faststart -c copy updated.mp4 ffprobe -v trace -i updated.mp4 2>&1 | grep -e 'mdat' -e 'moov' [mov,mp4,m4a,3gp,3g2,mj2 @ 0x140605150] type:'moov' parent:'root' sz: 4022 40 596757 [mov,mp4,m4a,3gp,3g2,mj2 @ 0x140605150] type:'mvhd' parent:'moov' sz: 108 8 4014 [mov,mp4,m4a,3gp,3g2,mj2 @ 0x140605150] type:'trak' parent:'moov' sz: 2200 116 4014 [mov,mp4,m4a,3gp,3g2,mj2 @ 0x140605150] type:'trak' parent:'moov' sz: 1609 2316 4014 [mov,mp4,m4a,3gp,3g2,mj2 @ 0x140605150] type:'udta' parent:'moov' sz: 97 3925 4014 [mov,mp4,m4a,3gp,3g2,mj2 @ 0x140605150] type:'mdat' parent:'root' sz: 592695 4070 596757

videojs - 如何在直播期间捕获自定义http错误代码？

我有一个正在使用 videojs 6.8 播放的直播流 (HLS)。对于某些用户来说，播放开始后（大约加载了 4-5 个 .ts 文件），服务器会抛出 409 错误。 我该如何捕捉

如何使视频（作为背景）根据屏幕分辨率调整大小？

这是html代码： ... 这是html代码： <div class="wrapper"> <video autoplay muted loop> <source src="resources/promo-vid.mp4" type="video/mp4"> </video> </div> 这是CSS代码： .wrapper { position: absolute; max-width: 100%; min-height: 500px; margin: 0 auto; z-index: -100; margin: 2.5em; } .wrapper video { min-width: 1600px; max-height: 800px; top: 50%; left: 50%; object-fit: cover; z-index: -100; display: block; background-position-x: 50%; background-position-y: 20%; } 这里就是现在的样子。我想要的输出是顶部的输出，但在另一个窗口上没有相同的输出。 试试这个。基本上，我使用位置 absolute 将视频拉伸到所有侧面，并添加 min-width 和 min-height 为 100%。 检查整页它会拉伸： body { padding: 0; margin: 0; } .video-container { position: relative; width: 100%; height: 100vh; overflow: hidden; display: block; } .video-container video { position: absolute; left: 0; right: 0; top: 0; bottom: 0; min-width: 100%; min-height: 100%; object-fit: cover; } <div class="video-container"> <video autoplay loop muted> <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4" /> </video> </div>

如何在spa、react js中以图片模式处理videojs图片？如果我正在浏览页面

我有一个视频/视频/id 的路线。如果我将视频更改为画中画模式，然后转到另一个页面，我该如何处理？ 现在我正在将 videojs 放置在 componentWillUnmount 上。如果我是...

在 Android 上禁用 html5 视频标签中默认的丑陋海报图像

在android上，使用html5视频标签加载视频，在视频加载之前，占位符图像是一个灰色的图像，上面有一个大的“播放”图标，假设我没有视频的海报图像，所以我...

Android WebView 灰色播放按钮

我正在使用 HTML5 视频元素在 Android WebView 中播放视频。这对我来说非常有用，但使用它的唯一问题是视频元素会自动播放灰色，但是......

如何避免来自getusermedia的镜像流

我正在使用react-multimedia-capture来录制视频。最初显示来自 getUserMedia 的视频流，但我在视频流中获取镜像。寻找要通过我们翻阅的片段之一...

禁用 html5 视频自动播放

如何禁用 html5 视频自动播放？ 我尝试过的： 如何禁用 html5 视频自动播放？ 我尝试过的： <video width="640" height="480" controls="controls" type="video/mp4" autoplay="false" preload="none"><source src="http://mydomain.com/mytestfile.mp4">Your browser does not support the video tag.</video> 我会删除 autoplay 属性，因为如果浏览器遇到它，它会自动播放！ autoplay 是一个 HTML 布尔属性，但请注意，不允许使用值 true 和 false。要表示 false 值，您必须省略该属性。 布尔属性不允许使用“true”和“false”值。要表示假值，必须完全省略该属性。 此外，类型位于源代码内部，如下所示： <video width="640" height="480" controls preload="none"> <source src="http://example.com/mytestfile.mp4" type="video/mp4"> Your browser does not support the video tag. </video> 参考资料： http://www.w3.org/TR/html-markup/video.html HTML 规范（布尔属性） 删除视频标签中的自动播放。使用这样的代码 <video class="embed-responsive-item" controls> <source src="http://example.com/video.mp4"> Your browser does not support the video tag. </video> 100% 正常工作 尝试将 autostart="false" 添加到您的源标签。 <video width="640" height="480" controls="controls" type="video/mp4" preload="none"> <source src="http://example.com/mytestfile.mp4" autostart="false"> Your browser does not support the video tag. </video> JSFiddle 示例 要禁用自动播放，您必须完全删除autoplay属性。 否则会被解释为autoplay=true。很不明显！ 只需在视频标签中使用 preload="none"，页面加载时视频就会停止自动播放。 事实上，将 autoplay 设置为 false 并不能帮助某些视频正常播放。请参阅小提琴中的此案例。 如果您想暂停所有视频，您可能需要通过代码执行以下操作： videos = document.querySelectorAll("video"); for(video of videos) { video.pause(); } 当然，如果 video 标签位于影子根元素中，则上述情况将不起作用，但几乎没有任何通用解决方案适用于影子根元素。在那里，您将需要一种自定义方法并首先扩展影子根。 删除所有标有 autoplay 的属性，因为它在标签中的存在是 true 的布尔简写。 此外，请确保始终使用 video 或 audio 元素。不要使用 object 或 embed，因为这些元素默认使用第三部分插件自动播放，并且如果不更改浏览器中的设置就无法停止。 <video class="embed-responsive-item" controls> <source src="http://example.com/video.mp4" autostart="false"> Your browser does not support the video tag. </video> 我希望在编辑模式下 autoplay="false" 但在查看器模式下 autoplay="true" 并通过仅在查看器模式下通过 jQuery 添加属性来解决它： <video id="vid" class="my-vid" poster="https://poster-url/poster.jpg" loop="loop" controls="controls" width="100%" height="100%"> <source src="https://video-url/vision.mp4" type= "video/mp4" /> </video> <script type="text/javascript"> if (document.location.href.indexOf('domain') > -1 || document.location.href.indexOf('test') > -1) { $(document).ready(function() { $('video').attr('autoplay','autoplay') }); } </script> 2024 年什么在起作用？ 要阻止页面上的任何嵌入视频在下载期间播放，即“自动播放”，使用 autoplay="none" 或 autoplay="0"、删除单词“autoplay”或 preload="none" 不起作用。 为什么这么难？ 可以设置autoplay="" <video width="640" height="480" controls="controls" type="video/mp4" autoplay=""> <source src="http://example.com/mytestfile.mp4"> Your browser does not support the video tag. </video> ps。要启用您可以使用 autoplay 或 autoplay="autoplay" 只需将 autoplay="false" 放在源标签上..:)

HTML5 在播放视频/音频时启用上一个/下一个曲目

我正在尝试使用 HTML/JS 构建一个自定义视频播放器。我已经制作了两个按钮，可以使用 标签加载上一个/下一个曲目。但是，我希望系统能够识别出这一点 我正在尝试使用 HTML/JS 构建一个自定义视频播放器。我已经制作了两个按钮，可以使用 <button> 标签加载上一个/下一个曲目。但是，我希望系统认识到也有上一个/下一个曲目可用。 也就是说，当我播放 Spotify 中的音乐或 YouTube 中的视频时，我的 Chrome 浏览器会在启用上一个/下一个按钮的情况下显示类似的内容。 截图1 或者类似的内容出现在我的 Mac 状态栏上，再次启用上一个/下一个按钮。 截图2 但是，当我使用 HTML 加载视频时，这些按钮会变灰并被禁用。 我尝试在 <video> 标签内添加多个源，并使用 <ul>/<li> 标签制作播放列表，但没有成功。我什至不确定这是否与我的问题有关。我真的需要建立一个播放列表来实现我想要的吗？我想知道系统在什么情况下识别出有上一个/下一个曲目可用。 您可以使用 Media Session API 来控制上一个/下一个曲目按钮： 媒体会话 API 提供了一种自定义媒体通知的方法。它通过提供元数据供用户代理显示您的 Web 应用程序正在播放的媒体来实现此目的。 它还提供了浏览器可用于访问平台媒体键的操作处理程序，例如键盘、耳机、遥控器上的硬件键以及通知区域和移动设备锁定屏幕上的软件键。因此，即使不查看网页，您也可以通过设备无缝控制网络提供的媒体。

在 HTML5 视频中设置 currentTime 的问题

我的 html 中间有一个视频。正如你一开始看到的，我没有任何来源 我的 html 中间有一个视频。正如你一开始看到的，我没有任何来源 <video id="videoPrincipal" src="" width="640" height="360" controls preload></video> 当我单击按钮时，我会触发一个函数，该函数会： myVid = document.getElementById('videoPrincipal'); myVid.src = 'video.mp4'; myVid.play(); myVid.currentTime ='5'; 视频开始正确播放，但我无法设置当前时间（我所做的与我们在http://www.w3schools.com/tags/av_prop_currenttime.asp中看到的相同） 如果我在调用播放函数之前设置 currentTime ，它会给我同样的错误。 控制台中显示的错误如下：“未捕获 InvalidStateError：尝试使用不可用或不再可用的对象。” （在当前时间线中）但是当我搜索这个问题时，我无法与视频关联，只能与画布关联。 提前致谢 您不必等待它开始播放，但它必须准备好播放。有 canplay 事件可以做到这一点，所以类似这样的事情应该可以工作： myVid.play(); myVid.addEventListener('canplay', function() { this.currentTime = 5; }); 如上所述，当视频不可搜索时，您尝试设置 currentTime。因此，作为替代用例（例如，当用户单击按钮时将时间重置为 0），您可以执行以下操作： function resetVideo() { myVid.pause(); if (myVid.seekable.length > 0) { myVid.currentTime = 0; } } 或者，您也可以仅在之前播放过视频的情况下尝试重置。 function resetVideo() { myVid.pause(); if (myVid.currentTime !== 0) { myVid.currentTime = 0; } } video = document.getElementById('video'); begin_play = 50; play_video_first = true; //if you want to run only first time video.addEventListener("play", capture, false); function capture(event) { if (event.type == "play"){ if(play_video_first){ play_video_first = false; video.currentTime = begin_play; } } } 你必须等到它准备好才能玩， 即不要期望 play 是一个阻塞函数 按如下方式更改您的代码： myVid.play(); myVid.media.addEventListener('playing', function(){ myVid.setCurrentTime(5); });

Angular：视频的点击事件

我正在尝试在视频上绑定点击事件，但它不起作用。每当用户单击视频上的任意位置或视频元素的控件时，我需要触发事件。我尝试过以下操作： 组件.htm...

如何制作 Youtube 嵌入自动播放

我正在尝试将 YouTube 视频嵌入到我的 html 文件中，我需要它自动播放。我是html初学者。 我尝试在 URL 末尾添加“?autoplay=1”并添加“autoplay&qu...

录制视频 HTML5 无法在 Safari 和 iOS 移动应用程序中工作

我正在尝试使用 HTML5 视频 - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video 访问设备上的摄像头。 我正在关注这个例子 - https://developer.mozilla.org/en-U...

为什么我无法在启用自动播放的情况下取消 HTML5 视频静音？

我遇到了一个非常烦人的问题。我尝试了几个小时来取消带有“静音”标志的 HTML5 视频静音，但我尝试的所有方法都不起作用。 $("#video_background").prop('静音', false); 可悲的是，

有没有一个Python库可以提取视频元数据，例如[标题，描述，说明文字/副标题]？

我目前正在尝试寻找Python库，可以帮助我从视频文件中提取元数据或信息，例如[mp4、Mkv、Avi、WebM、mpg]格式。 我的主要数据

快速路线第二次开火

我有一个程序，我已经减少到几乎没有，但仍然遇到问题，如果我包含 HTML5 视频构造，那么初始路由会被调用两次。 应用程序.js var express = require('

带圆角的 HTML5 视频元素显示黑色区域

我在 WP Elementor 中有带有视频对象的 HTML5 播放器。 我用这段代码来设置圆角： 视频{边框半径：25px; 溢出：隐藏； -webkit-transform: 翻译Z(0); 盒子阴影：0 19px 51p...

React：在自定义 React 视频播放器和 Video.js 之间切换导致“无法执行‘removeChild’”错误

我正在 React 中开发一个视频播放器组件，我使用切换按钮在自定义视频播放器和 Video.js 之间切换。自定义播放器的初始加载工作正常，当我切换到 Vid 时...

使用 HTML5 视频标签从 Node.js 服务器上的 MinIO 存储桶流式传输视频

我需要使用 HTML5 MSE 流式传输通过 MinIO 存储的视频。我在 sapper 服务器上使用 minio 节点客户端来提供视频流，端点如下： 从 'minio' 导入 Minio ...