html5-video 相关问题

您能帮我看看为什么这两个视频在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 年。我的其他[电子邮件受保护]视频可以正常播放。我怀疑是因为我的文档更新了。如果您找到相关文档，希望您能留言告诉我。

html video html5-video video-processing

回答 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 组件中，然后有一个单独的变量用于存储状态。

video html5-video

回答 1 投票 0

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

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

html css video html5-video

回答 1 投票 0

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

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

javascript html video html5-video

回答 14 投票 0

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

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

node.js express video-streaming html5-video

回答 1 投票 0

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

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

javascript dom html5-video

回答 1 投票 0

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

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

javascript google-chrome html5-video

回答 1 投票 0

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

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

html html5-video 3gp

回答 1 投票 0

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

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

javascript touch mobile-safari html5-video

回答 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 视频。

javascript html vuejs2 html5-video video-player

回答 2 投票 0

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

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

node.js ffmpeg video-streaming html5-video video-codecs

回答 1 投票 0

获取视频帧作为图像

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

javascript canvas html5-canvas html5-video

回答 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 的浏览器。

javascript html5-video video.js

回答 1 投票 0

在 Ionic/Phonegap 中内嵌播放视频（webkit-playsinline 不起作用）

我正在使用 HTML5 视频标签来在我的 ionic 应用程序中播放视频。这是我的代码：

ios cordova ionic-framework html5-video

回答 0 投票 0

上传前压缩视频/音频的原生浏览器方法？

我很确定当前的答案是否定的，但是浏览器是否有内置的方式来压缩视频/音频？也许有一个黑客，因为我确信浏览器将能够访问压缩库。 ...

javascript html5-video webapi mediastream

回答 1 投票 0

html5-video 相关问题

最新问题