html5-video 相关问题

在 Nuxt v3 + Vuetify 应用程序中嵌入远程视频

我有一个 Nuxt v3 + Vuetify 应用程序，想在我的页面中嵌入一些视频。一个来自 Youtube，另一个来自 Dailymotion，另一个来自 Invidious！ 我目前正在使用 ，但是...</desc> <question vote="0"> <p>我有一个 Nuxt v3 + Vuetify 应用程序，想要在我的页面中嵌入一些视频。一个来自 Youtube，另一个来自 Dailymotion，另一个来自 Invidious！</p> <p>我目前正在使用 <pre><code>&lt;iframe&gt;</code></pre>，但我正在寻找替代方案，因为我无法再使用 iframe。</p> <p>你有什么建议？ 我尝试在线搜索，发现只有相当旧的库，并且大多数库仅支持特定的提供商（Youtube、Vimeo 等...）。</p> <p>谢谢</p> </question> <answer tick="false" vote="0"> <p>我目前遇到了同样的问题，但在 youtube 上我使用了这个 <a href="https://abdus.dev/posts/youtube-oembed/" rel="nofollow noreferrer">https://abdus.dev/posts/youtube-oembed/</a> 并且它适用于我的 Nuxt 应用程序</p> </answer> </body></html>

OVP：视频中当前点的 JavaScript 回调

我制作了一个 JavaScript 界面，它可以执行一些高级操作，以允许跳转到视频的特定部分。我基本上有一个用于清理的时间线界面，我想要一个

HLs .m3u8 清单文件问题

我做了一个刮刀，可以刮掉我最喜欢的一个。电影网站“flixhq”并给了我 .m3u8 清单文件。其内容是这样的： 'EXTM3U #EXT-X-目标持续时间：13 #EXT-X-

如何判断用户是否与文档交互来启动视频？

我尝试在 Chrome 中自动播放视频时遇到错误，显示： DOMException: play() 失败，因为用户没有先与文档交互。 对于“正常”，有一个解决方案...

事件处理程序未针对视频标签触发

我有一个 NextJS 应用程序，我可以在其中使用 video 元素显示视频文件。我正在尝试在其上添加一堆事件处理程序：

更改多音轨视频中的音频

我有带有多个音轨的视频。我想播放视频并希望更改视频中的音轨。有什么方法可以用 html 制作这个，或者有 html 支持的播放器吗？

自动播放有声视频：有些网站仍然可以做到

我知道几乎浏览器允许自动播放，如果： 视频不包含声音 如果视频有声音，则必须将其静音 如果用户在域上有真实的手势（例如单击、选项卡等），则允许自动播放。 我们...

Firebase 存储中保存的视频无法在手机浏览器上运行

我将视频存储在 Firebase Storage 上。当我使用笔记本电脑或台式电脑时，这些视频在浏览器中运行得非常好。然而，当通过 b...

如何在没有控件的情况下单击视频来播放视频，并在单击播放后显示控件？在reactJS中

`导出 const UseRefPlayer = () => { const videoRef = useRef (); 常量handlePlay = () => { videoRef.current.play(); }; 常量handlePause = () => { videoRef.current.pause(); }; 返回...

HTML5 视频“自动播放”无法在 Chrome 中自动启动

我有以下代码： 我有以下代码： <video controls autoplay> <source src="video/myVideo.mp4" type="video/mp4"> <source src="video/myVideo.webm" type="video/webm"> <source src="video/myVideo.ogv" type="video/ogg"> </video> 视频： 在 Chrome 和 Firefox 中都显示良好 在 Firefox 中，它按预期播放 在 Chrome 中它会显示，但不会“自动启动”。这就是问题所在。 如果我点击它（在 Chrome 中），它就可以正常播放 尝试过 <video controls autoplay>...</video> <video controls autoplay="1">...</video> <video controls autoplay="autoplay">...</video> Chrome 中没有任何效果。 然后我还尝试按照https://en.wikipedia.org/wiki/HTML5_video中的建议更改编解码器，但它也不起作用： <source src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"'> <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'> 现在我已经走进了死胡同。感谢您的指点！非常感谢。 您需要添加 playsinline autoplay muted loop，因为 Chrome 不允许视频在未静音的情况下自动启动。另外，现在我不知道为什么它不能在所有 Android 设备上运行。我正在尝试查看它是否特定于版本，如果我找到一些东西，我会让你知道。 Chrome 问题： 经过一些研究，我发现它有时在 Chrome 上不起作用，因为在响应式中你可以激活数据保护程序，它会阻止任何视频自动启动。 当我尝试静音时尝试这个，在 codpen 中查看此演示 <video width="320" height="240" controls autoplay muted id="videoId"> <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"> Your browser does not support the video tag. </video> 脚本 function toggleMute() { var video=document.getElementById("videoId"); if(video.muted){ video.muted = false; } else { debugger; video.muted = true; video.play() } } $(document).ready(function(){ setTimeout(toggleMute,3000); }) 编辑属性内容 autoplay muted playsinline https://developers.google.com/web/updates/2017/09/autoplay-policy-changes 提出问题时情况可能并非如此，但从 Chrome 66 开始，自动播放被阻止。 http://bgr.com/2018/04/18/google-chrome-66-download-auto-playing-videos-block/ 我刚刚读了这篇文章，它说： 重要提示：视频文件的顺序至关重要； Chrome 目前有一个错误，如果 .webm 视频出现在其他任何内容之后，它就不会自动播放它。 因此，如果您将 .webm 放在源列表中的第一位，您的问题似乎就会得到解决。希望有帮助。 试试这个： <video src="{{ asset('path/to/your_video.mp4' )}}" muted autoplay loop playsinline></video> 然后把这个js放在后面： window.addEventListener('load', async () => { let video = document.querySelector('video[muted][autoplay]'); try { await video.play(); } catch (err) { video.controls = true; } }); 这些是我用来让视频在 Chrome 上自动播放的属性 - onloadedmetadata="this.muted = true"、playsinline、autoplay、muted、loop 示例： <video src="path/to/video.mp4" onloadedmetadata="this.muted = true" playsinline autoplay muted loop></video> 这个问题在这里有详细描述 https://developers.google.com/web/updates/2017/09/autoplay-policy-changes TL;DR 您仍然可以自动播放muted视频 此外，如果您想在 iOS 上自动播放视频，请添加 playsInline 属性，因为默认情况下 iOS 会尝试全屏视频 https://webkit.org/blog/6784/new-video-policies-for-ios/ Extremeandy 提到，从 Chrome 66 开始，自动播放视频已被禁用。 经过研究，我发现静音视频仍然可以自动播放。就我而言，视频没有任何音频，但添加静音到视频标签已修复它： 希望这对其他人也有帮助。 这是：http://www.htmlcssvqs.com/8ed/examples/chapter-17/webm-video-with-autoplay-loop.html 您必须添加标签：autoplay =“autoplay”loop =“loop”或只是“autoplay”和“loop”。

寻找使用 HTML 5 和 Webvtt 与文档进行视频同步的想法

我刚刚开始一个新项目。我正在处理法庭笔录和视频证词。我想创建一个网络播放器，将转录文件与视频同步。我正在努力...

有没有办法在音频或视频控件到达指定停止点时触发事件？ [重复]

我有一个像这样实现的 HTML 音频元素： &...

iOS 14.4.2 似乎禁用了视频自动播放

我注意到，随着最近更新到 iOS 14.4.2，我所有的自动播放视频都停止了自动播放。在以前的版本上一切都运行得很好。这适用于 HTML 5 视频以及 vi...

强制 Video.js 播放器粘在浏览器边缘（响应式？）

关于这个问题有一些问题，遗憾的是对我来说没有一个有效。 首先我想给你看一张截图，以便你明白我的要求 这是我当前的代码

在plyr.js上动态更改视频源和字幕？

我正在努力尝试向 plyr.js 添加标题，但到目前为止在互联网上找不到任何内容 我的代码是 我正在努力寻找向 plyr.js 添加标题的方法，但到目前为止在互联网上找不到任何内容 我的代码是 <video class="player" style="min-width: 100%; min-height: 500px;" id="my-player"> </video> js 是： const player = new Plyr('#my-player'); 用js添加视频源和字幕应该怎么做？ 搜索原始 git 仓库 我找到了解决方案 根据这一行： const player = new Plyr('#my-player'); 你应该这样做： player.source = { type: 'video', title: 'Example title', sources: [ { src: VIDEO_ADDR, } ], tracks: [ { kind: 'captions', label: 'English', srclang: 'en', src: TRACK_ADDR, default: true, } ] }; player.play(); 最好将其放在事件函数上，例如onclick

如何选择具有 ID 的元素的子元素来添加或删除属性？

我有一种情况，我想从视频元素添加/删除属性以根据视口显示不同的视频。您可能都知道仅使用“display:

如何在HTML视频标签中打开.mov格式视频？

我想像这样播放.mov视频，但视频无法在任何浏览器中播放。

如何从 html 视频标签获取屏幕截图

有人可以告诉我如何从 HTML 视频标签中抓取照片吗？ 我有一个带有视频标签的 aspx 页面。 有人可以告诉我如何从 HTML 视频标签中抓取照片吗？ 我有一个带有视频标签的 aspx 页面。 <div id="container"> <video autoplay="true" runat="server" id="videoElement"> </video> </div> 我想在单击按钮时截取屏幕截图。 如果我能得到任何线索，我将非常感激。 哇，非常酷的人访问了这个问题。投反对票，不发表任何评论。 我已经找到了如何抓取屏幕截图的解决方案。 第一个解决方案 //Create a new bitmap. var bmpScreenshot = new Bitmap(Screen.PrimaryScreen.Bounds.Width, Screen.PrimaryScreen.Bounds.Height, PixelFormat.Format32bppArgb); // Create a graphics object from the bitmap. var gfxScreenshot = Graphics.FromImage(bmpScreenshot); // Take the screenshot from the upper left corner to the right bottom corner. gfxScreenshot.CopyFromScreen(Screen.PrimaryScreen.Bounds.X, Screen.PrimaryScreen.Bounds.Y, 0, 0, Screen.PrimaryScreen.Bounds.Size, CopyPixelOperation.SourceCopy); // Save the screenshot to the specified path that the user has chosen. bmpScreenshot.Save("Screenshot.png", ImageFormat.Png); 第二种解决方案： 这是一个参考样式链接 codepen.io/chrisbeast/pen/ebYwpX 访问此链接，适用于桌面和移动浏览器。

扩展名为.h264的Html视频

可以使用视频标签在 Html 中读取扩展名为 .h264 的视频 例如： 可以使用视频标签在 Html 中读取扩展名为 .h264 的视频 例如： <video width = "400" controls autoplay> <source src = "video.h264" type = "video / mp4"> </video> 提前非常感谢！ 阿尔贝托 对于保存在 .h264 文件中的 h264 等原始流，如果我们只谈论 HTML5，答案是否定的。 HTML5 需要容器格式，并且没有办法解决这个问题。 这确实可以通过新的 WebCodecs API 实现，但这是一个年轻的标准。不过兼容性已经相当强。 通过现有的许多 ffmpeg 端口进行解码的自定义方法也是一种可能，尽管是一种手提钻解决方案。这是使用该 apporach 的 .h264 播放器。当然，这是一个巨大的依赖。 h.264 是视频的编码。 您要使用的扩展名是视频的容器。通常对于 h264 视频来说是 mp4。 <source src = "video.mp4" type = "video / mp4"> 道格

为什么在 Blazor MAUI 视频标签中使用 @volumechange 事件时 EventArgs e 为空？

如果我在 Windows 上的 .NET Blazor MAUI 应用程序中使用 @onvolumechange 事件，我会收到空的 EventArgs。 Razor 文件中的播放器： 如果我在 Windows 上的 .NET Blazor MAUI 应用程序中使用 @onvolumechange 事件，我会收到空的 EventArgs。 Razor 文件中的播放器： <video @onvolumechange="@(e => PlayerVolumeChanged(e))" class="video" controls disablepictureinpicture controlslist="nodownload nofullscreen noremoteplayback noplaybackrate" autoplay onloadstart="this.volume=@_videoPlayerVolume" onclick="this.paused ? this.play() : this.pause();"> <source src="@video" type="video/mp4"> </video> C#文件中的逻辑： private void PlayerVolumeChanged(EventArgs e) { // e is empty here... } 我正在寻找一种非 JavaScript 解决方案来存储播放器的当前音量。要求是视频播放器每次都以相同的音量播放视频。我预计该卷存储在 EventArgs e 中。但 e 是空的。 参数类型为 ChangeEventArgs .