阿帕奇+ HTML5 视频标签 - 可能会出现什么问题？

发布于 2024-12-25 09:06:23 字数 1446 浏览 0 评论 0原文

【查看更新！ - 适用于 Android/IOS 浏览器，但不适用于其他地方。 FireFox、Chrome、Opera、Safari 都失败。尽管它们肯定已准备好 HTML5 视频标签]

只是尝试使用 html5 标签流式传输视频。我得到的只是视频播放器控件，没有其他任何东西。这太简单了，我认为它应该可以工作：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Movie title</title>
</head>
<body>
<video id="movie" preload controls>
  <source src="test.mp4" />
</video>
</body>

那么我哪里可能会出错呢？我已经尝试了比这个小片段更多的尝试。我尝试过其他人的示例片段。我尝试过很多视频、很多格式（mp4、flv、ogg）。我尝试在 Chrome、Firefox、Android 嵌入式浏览器、Opera、IE9 中查看它。

我可以在 VLC 等程序中从 URL 流式传输文件，没有任何问题。

我开始认为 Apache2 可能是这里的问题，尽管我认为我可以毫无问题地从 VLC 流式传输 URL，这表明 Apache2 不是问题。

任何帮助表示赞赏。我在这里拉头发。

更新：

每当我尝试从 Chrome 中访问视频目录的 URL 时，似乎都会出现此错误：资源解释为其他，但以未定义的 MIME 类型传输
该错误绝对是服务器端问题，apache2 不得在某处正确配置？
如果我从 Apache2 服务器中的 URL 访问 FLV 文件目录，则会出现此 MIME 类型未定义错误。它是视频控制。每当我单击“播放”时，它都会多次发送未定义的 MIME 类型的垃圾邮件。

更新2：

验证我的.htaccess正在被读取
将以下内容添加到我的.htaccess：
AddType 视频/ogg .ogv
AddType 视频/ogg .ogg
AddType video/mp4 .mp4
仍然不起作用，仍然看到 MIME Chrome 中的 TYPE UNDEFINED。

Update3：

Firefox 和其他浏览器可以毫无问题地查看 URL/test.mp4，但没有一个可以使视频标签正常工作。

Update4：

Android 现在可以让视频标签工作了。 .htaccess 的更改似乎解决了这个问题。然而，无论出于何种原因，没有任何一个桌面浏览器可以做到这一点。

原文

[See the updates! - Works on Android/IOS browsers but no where else. FireFox, Chrome, Opera, Safari all fail. Even though they are definitely HTML5 video tag ready]

Simply trying to stream a video using html5 tag. All I get is the video player controls and nothing else. This is so simple I assumed it should just work:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Movie title</title>
</head>
<body>
<video id="movie" preload controls>
  <source src="test.mp4" />
</video>
</body>

So where could I be going wrong? I've tried a lot more than this small snippet. I've tried other peoples example snippets. I've tried many videos, many formats (mp4, flv, ogg). I've tried viewing it in Chrome, Firefox, Android Embedded browser, Opera, IE9.

I can stream the file from the URL in programs like VLC without any issues.

I am beginning to think Apache2 might be the issue here although I figure the fact I can stream the URL from VLC without issue would suggest Apache2 is not the problem.

Any help appreciated. I'm pulling on hair here.

Update:

Whenever I try and access the URL of the video directory from within Chrome it seems to give me this error: Resource interpreted as Other but transferred with MIME type undefined
That error is definitely a server side problem, apache2 must not be configured properly somewhere?
If I access even a FLV file directory from the URL within my Apache2 server it gives this MIME type undefined error. It the video controls. Whenever I click play it spams the MIME type undefined a few times.

Update2:

Verified my .htaccess is being read
Added the following to my .htaccess:
AddType video/ogg .ogv
AddType video/ogg .ogg
AddType video/mp4 .mp4
Still not working, still see the MIME TYPE UNDEFINED in Chrome.

Update3:

Firefox and others can view the URL/test.mp4 without issue but NONE can get the video tag to work properly.

Update4:

Android can get the video tag to work now. The .htaccess change seemed to fix that. However not one single desktop browser can for whatever reason.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

若能看破又如何 2025-01-01 09:06:23

Firefox 和 Opera 不支持 MP4，Chrome 很快就会放弃对它的支持。添加 WebM 源也是个好主意。

尝试将 type 属性添加到 source 声明中：

<source src="test.mp4" type="video/mp4">

Firefox and Opera don't support MP4, and Chrome will drop support for it soon. It's a good idea to also add a WebM source.

Try adding the type attribute to the source declaration:

<source src="test.mp4" type="video/mp4">

回复收藏 0 原文

多像笑话 2025-01-01 09:06:23

这是我的网站 www.pi-corp.net 上的 html 代码。这允许在所有商业浏览器上播放并回退到 Flash。

<div class="video-js-box" style="width: 316px"><br><video class="video-js" width="320" height="240" controls preload autoplay poster="http://pi-corp.net/images/PIC_Full_Logo_PIC_HMI.png"><source src="http://pi-corp.net/picvideo/PIChmi.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /><source src="http://pi-corp.net/picvideo/PIChmi.ogv" type='video/ogg; codecs="theora, vorbis"' /><source src="http://pi-corp.net/picvideo/PIChmi.webm" type='video/webm; codecs="vp8, vorbis"' />
        <object id="flash_fallback_1" class="vjs-flash-fallback" width="320" height="240" type="application/x-shockwave-flash"
        data="flowplayer-3.2.1.swf"><div class="style23"> <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /><param name="allowfullscreen" value="true" /><param name="flashvars" value='config={"playlist":["http://pi-corp.net/images/PIC_Full_Logo_PIC_HMI.png", {"url":"http://pi-corp.net/picvideo/PIChmi.mp4
        ","autoPlay":true,"autoBuffering":true}]}' /> <img src="http://pi-corp.net/images/PIC_no_playback.png" width="320" height="240" alt="Poster Image"
          title="No video playback capabilities." /> </div> </object></video>

Here is my html code from my site www.pi-corp.net. This allows for playback on all commercial browsers with fallback to flash.

<div class="video-js-box" style="width: 316px"><br><video class="video-js" width="320" height="240" controls preload autoplay poster="http://pi-corp.net/images/PIC_Full_Logo_PIC_HMI.png"><source src="http://pi-corp.net/picvideo/PIChmi.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /><source src="http://pi-corp.net/picvideo/PIChmi.ogv" type='video/ogg; codecs="theora, vorbis"' /><source src="http://pi-corp.net/picvideo/PIChmi.webm" type='video/webm; codecs="vp8, vorbis"' />
        <object id="flash_fallback_1" class="vjs-flash-fallback" width="320" height="240" type="application/x-shockwave-flash"
        data="flowplayer-3.2.1.swf"><div class="style23"> <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /><param name="allowfullscreen" value="true" /><param name="flashvars" value='config={"playlist":["http://pi-corp.net/images/PIC_Full_Logo_PIC_HMI.png", {"url":"http://pi-corp.net/picvideo/PIChmi.mp4
        ","autoPlay":true,"autoBuffering":true}]}' /> <img src="http://pi-corp.net/images/PIC_no_playback.png" width="320" height="240" alt="Poster Image"
          title="No video playback capabilities." /> </div> </object></video>

回复收藏 0 原文

~没有更多了~