html5-video 相关问题

HTML5视频是HTML5草案规范中引入的一个元素,用于创建符合标准且无插件的方式来播放视频和电影,部分替换对象元素。

无法使用 lightGallery 播放视频

在一个网络项目中,我需要使用 justifiedGallery 布局一个画廊,并使用 lightGallery 创建灯箱处理。现在,照片可以正常播放,但视频无法播放: 这是 CodePen

回答 1 投票 0

Node.js 视频流 WEBM Live Feed 到 HTML

我有一个node.js服务器,它通过socket.io从网页接收WEBM blob二进制数据小数据包! (navigator.mediaDevices.getUserMedia -> 流 -> mediaRecorder.ondataavailable ...

回答 2 投票 0

403 播放 Google 云端硬盘视频时禁止

我正在从 google 云端硬盘获取 html5 视频,一段时间后就会停止 原因是 我正在使用下载网址访问谷歌驱动器文件,但下载网址在一段时间后就会过期,因此...

回答 2 投票 0

HTML5 视频播放器进度条在 Chrome 中看起来很奇怪

我有一个 Angular 15 项目,我在其中使用 html5 视频播放器。 播放开始之前,进度条如下所示: 播放开始前的进度条 当视频正在播放时,进度条看起来...

回答 1 投票 0

通过 useState 设置 src 时,视频在移动浏览器上冻结,但在单击按钮或设置为静音时播放

StackOverflow 社区您好, 我的网络应用程序中的视频元素面临着一个有趣的问题。该视频旨在在桌面和移动浏览器上自动播放。不过,我

回答 1 投票 0

如何在 Flask 中为可使用 HTML 的视频创建 URL?

我有一个烧瓶服务器,里面有一个视频文件。如何让用户可以使用 HTML 标签观看视频?在服务器中,我有 send_file: @app.route(“/电影”) 定义

回答 1 投票 0

在 Vue js 中从网络摄像头流中提取图像帧

我正在使用 Vue.js 制作一个记录用户网络摄像头镜头的 Web 应用程序。我想将这段视频发送到我通过网络套接字连接的后端服务器。 问题是我想要...

回答 1 投票 0

为什么Mp4视频在移动设备上无法正常播放?

您能帮我看看为什么这两个视频在PC浏览器中可以正常播放,但第一个视频在手机浏览器中无法播放吗?视频格式编码有什么问题? 您能帮我看看为什么这两个视频在PC浏览器中可以正常播放,但第一个视频在手机浏览器中无法播放?视频格式编码有什么问题? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> yes <video controls src="https://static-official.5i5j.com/activity/marketinghub/test/20231222211656/1703250988.mp4"></video> No <video controls src="https://static-official.5i5j.com/upload/2023/黑屏.mp4"></video> </body> </html> 我对视频编码的了解还比较少。 以上两个视频,一个是从用户那里收集的,另一个是我发现无法正常播放后通过软件编码的视频。但我想知道视频无法正常播放的真正原因? 我尝试使用ffprobe获取两个视频的媒体信息,但我找不到彼此的不同之处。 我找到了问题的原因。首先这个问题只出现在ios上,Android上没有问题。 问题的根源在于视频的压缩级别。 https://developer.apple.com/library/archive/documentation/NetworkingInternet/Conceptual/StreamingMediaGuide/FrequentlyAskedQuestions/FrequentlyAskedQuestions.html 但是,本文档最后更新是在 2016 年。 我的其他[电子邮件受保护]视频可以正常播放。 我怀疑是因为我的文档更新了。如果您找到相关文档,希望您能留言告诉我。

回答 1 投票 0

muy 播放器通过 javascript 开始/停止视频

我使用 MUX (https://www.mux.com) 和 MUX 播放器嵌入了我的视频。 我使用 MUX (https://www.mux.com) 和 MUX 播放器嵌入了我的视频。 <mux-player stream-type="on-demand" playback-id="xxxxx" autoplay ></mux-player> 视频正在叠加播放。我现在的问题是,如果视频正在播放并且覆盖层关闭,它仍然可以播放。我如何控制 - 通过 javascript/jquery - 这个视频如果覆盖层关闭,我想停止。有没有人有这个播放器和JS的经验。 感谢您的帮助 Mux 播放器具有在开始播放或暂停时触发的道具功能。 onPlay={() => { console.log('Started playing') }} onPause={() => { console.log('Paused') }} 将这些道具添加到 MuxPlayer 组件中,然后有一个单独的变量用于存储状态。

回答 1 投票 0

如何裁剪具有隐藏溢出的视频的顶部和底部?

我是一个该死的初学者,想要嵌入一个全宽但顶部和底部被裁剪的视频([https://www.pexels.com/video/bartender-making-a-cocktail-3772392/])。 我把这个放在CSS中: 视频 { 积极...

回答 1 投票 0

HTML5 和 Javascript 仅在可见时播放视频

我有兴趣设置一个包含多个视频剪辑的 HTML 页面,以便每个视频剪辑仅在可见时播放,然后在看不见时暂停。 我发现了这个很好的例子,说明如何...

回答 14 投票 0

将 Motion-JPEG 实时视频流从 Express 传输到 React

我的服务器上有一个网络摄像机,它有一个http链接来访问实时视频:http://ip/video1.mjpg。 无论如何,我可以通过 Express 将 .mjpg 流式传输到 React 前端吗?我已经成功了...

回答 1 投票 0

如何在 HTML 视频元素的客户端坐标和图片坐标之间进行转换?

假设我有一个视频元素,我想在其中处理鼠标事件: const v = document.querySelector('video'); v.onclick = (ev) => { ev.preventDefault(); console.info(`x=${event.offse...

回答 1 投票 0

当选项卡处于后台时,requestVideoFrameCallback 不会触发

这是显示实际问题的代码片段,但基本上,当选项卡在 Chrome 中处于后台时, requestVideoFrameCallback 会停止运行。 函数开始测试(){ 视频 = document.querySe...

回答 1 投票 0

如何在 HTML5 中播放 3gp 视频?

无法使用 HTML5 播放 3gp 文件。我有 Firefox 16 和 Chromium Version 22,我得到的结果如下: 找不到格式和 MIME 类型受支持的视频。 这是我的代码

回答 1 投票 0

防止在 iOS 上的 HTML5 <video> 元素上滚动

我试图阻止 Mobile Safari 上包含 HTML5 视频元素的 Web 应用程序内的默认滚动。处理 document.ontouchmove 并调用 e.preventDefault() 一直是立场......

回答 5 投票 0

在 HTML5 中找不到此媒体类型 = video/mpeg 的兼容源

所以我尝试使用 vue-video-player 在我的模态上制作视频播放器,所以下面是我的 ModalDetailMediaVideo.vue 的模板代码 所以我尝试使用 vue-video-player 在我的模态上制作视频播放器,所以下面是我的 ModalDetailMediaVideo.vue 的模板代码 <template> <div @keydown.esc="modalClosed()" @click="modalClosed()" class="modal fade" id="modalMediaVideo" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered modal-lg justify-content-center"> <div class="layout-video"> <video-player ref="videoPlayer" class="vjs-custom-skin vjs-layout-small" :options="playerOptions" :aspectRatio="'9:16'" @play="onPlayerPlay($event)" @ready="onPlayerReady($event)" @pause="onPlayerPause($event)" > </video-player> </div> </div> </div> <script> import { videoPlayer } from 'vue-video-player'; export default { props: { videoSource: { type: Array, default: function() { return []; } } }, components: { videoPlayer }, data () { return { playerOptions: { mute: true, controls: true, controlBar: { timeDivider: false, durationDisplay: false }, sources: this.videoSource }, isPlaying: false } }, computed: { player () { return this.$refs.videoPlayer.player } }, methods: { onPlayerPlay (player) { console.log('player play!', player) this.isPlaying = true; }, onPlayerReady (player) { console.log('player ready!', player) this.player.play() }, onPlayerPause (player) { this.player.pause(); this.isPlaying = false; }, modalClosed(player){ if(this.isPlaying == true){ this.player.pause(); } } }, watch: { videoSource: function(){ console.log(this.videoSource, "INSIDE WATCHER") this.playerOptions.sources = this.videoSource; this.playerOptions.sources[0].type = 'video/mp4'; this.isPlaying = false; } } } </script> props videoSource 数组是 videoSource = { src: '', type: '' } 如您所见,如果 videoSource 属性以 mp4 / mov 格式传递 src 值,这些代码可以正常工作,但如果 videoSource 的 src 和类型是 mpeg,则这些代码将不起作用。 我也尝试过这个方法但是没用。 任何人请帮我提供有关在 HTML5 中播放 mpeg 格式视频的库或插件的参考信息。提前谢谢大家,爱你们。 您可以尝试的一件事是将 mpeg 视频转换为 HTML5 更广泛支持的其他格式,例如 mp4、webm 或 ogg。您可以使用商业或开源工具来执行此操作,然后将转换后的视频上传到您的网络服务器。然后,您可以在标签内使用多个标签来提供同一视频的不同格式供浏览器选择。例如,你可以这样做: <video-player ref="videoPlayer" class="vjs-custom-skin vjs-layout-small" :options="playerOptions" :aspectRatio="'9:16'" @play="onPlayerPlay($event)" @ready="onPlayerReady($event)" @pause="onPlayerPause($event)" > <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogg" type="video/ogg"> </video-player> 这样,您可以确保您的视频播放器可以在任何支持 HTML5 的浏览器中播放视频。您可以通过以下链接了解有关 HTML5 视频格式以及如何将它们嵌入到 HTML 中的更多信息:HTML 视频 - W3Schools 和 HTML 视频 - 如何使用 HTML 5 视频标签嵌入视频播放器。 您可以尝试的另一件事是使用可以在 HTML5 中播放 mpeg 视频的 JavaScript 库或插件。有一些库可以执行此操作,例如 MediaElement.js、Video.js 或 Plyr。这些库可以提供自定义视频播放器,可以处理不同的视频格式和编解码器,并添加字幕、字幕、播放列表等功能。您可以使用 npm 或 CDN 安装这些库,然后在 Vue 组件中使用它们。例如,你可以这样做: <template> <div class="layout-video"> <video id="video" class="video-js vjs-default-skin vjs-layout-small" controls preload="auto" width="640" height="360"> <source src="video.mpeg" type="video/mpeg"> </video> </div> </template> <script> import videojs from 'video.js'; export default { mounted() { // initialize the video player this.player = videojs(this.$refs.video, this.options, function onPlayerReady() { console.log('onPlayerReady', this); }); }, beforeDestroy() { // destroy the video player if (this.player) { this.player.dispose(); } }, data() { return { player: null, options: { // video player options } }; } }; </script> 这样,您就可以使用库或插件来播放 HTML5 中的 mpeg 视频。您可以通过以下链接了解有关这些库以及如何在 Vue 组件中使用它们的更多信息:[MediaElement.js]、[Video.js] 和 [Plyr]。 我希望这可以帮助您了解如何使用 vue-video-player 在 HTML5 中播放 mpeg 视频。

回答 2 投票 0

通过 LAN 流式传输网络摄像头:HTML5 视频元素未加载

我目前正在开发一个项目,目标是通过 LAN 传输我的网络摄像头,并以最少的设置读取 HTML5 视频元素中的流。我的设置涉及服务器(192.168.0.1 dev/video0 ...

回答 1 投票 0

获取视频帧作为图像

我正在尝试从视频 http://techslides.com/demos/sample-videos/small.mp4 获取视频帧作为图像,并且我的应用程序正在 localhost:3000 上运行。下面是我从 vi 获取图像的代码...

回答 1 投票 0

如何在网页浏览器中播放rtmp直播流?

我正在视频js播放器中尝试rtmp url。但它不起作用。 在视频js中,我们必须在源中给出类型(application/x-mpegURL | video/mp4)。 我正在视频 js 播放器中尝试 rtmp url。但它不起作用。 在视频js中,我们必须在源中给出类型(application/x-mpegURL | video/mp4)。 <video id="wiPlayer" class="video-js vjs-default-skin" controls codecs="avc1.4D401E, mp4a.40.2" preload="auto" width="1200" height="400" poster="<?=$post->screenShotUrl?>" data-setup='{"aspectRatio":"640:320", "autoplay": true, "controlBar": {"fullscreenToggle": true, "progressControl": true}}'> <p class="vjs-no-js">We're sorry, but your browser doesn't support Video</p> </video> js代码是 player = videojs('wiPlayer'); player.src({ src: stream_url, type: mPlayerType,// "video/mp4",//application/x-mpegURL useCueTags: true }); window.onOrientation(player, 'wiPlayer'); player.play(); 对我来说,网址就像: rtmp://vid-11239002.pull.usnecenter.broadcastapp.agora.cn/live/public1265537 如何用视频js播放这种直播网址?或者我们有其他解决方案吗? RTMP 的类型为 rtmp/mp4 或 rtmp/flv。这仅适用于具有 Flash 的浏览器。

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.