html5-video 相关问题

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

reactjs if-statement react-hooks html5-video

回答 1 投票 0

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”。

google-chrome html5-video

回答 9 投票 0

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

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

javascript html5-video webvtt

回答 2 投票 0

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

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

javascript html5-video html5-audio

回答 1 投票 0

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

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

ios html5-video vimeo autoplay vimeo-player

回答 2 投票 0

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

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

html css html5-video video.js

回答 1 投票 0

在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

html5-video plyr plyr.js

回答 1 投票 0

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

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

javascript mobile attributes html5-video

回答 1 投票 0

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

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

html html5-video

回答 7 投票 0

如何从 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 访问此链接，适用于桌面和移动浏览器。

c# jquery asp.net html5-video

回答 1 投票 0

扩展名为.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"> 道格

html video-streaming html5-video

回答 2 投票 0

为什么在 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 .

blazor html5-video maui eventargs

回答 1 投票 0

在 Javascript 中监控 WebRTC 视频（媒体）流质量

我正在使用 WebRTC 在对等点之间传输视频，但某些客户端的网络条件变化通常会导致接收到的视频流的质量发生变化。人们将这些问题归咎于服务

javascript video-streaming html5-video webrtc

回答 2 投票 0

Javascript 在模态窗口关闭时停止 HTML5 视频播放

我在模态窗口上有一个 html5 视频元素。当我关闭窗口时，视频继续播放。我是 JS 的新手。有没有一种简单的方法可以将视频播放停止功能与

javascript modal-dialog html5-video

回答 12 投票 0

html5-video 相关问题

最新问题