8

我在我的网站上使用最新的 mediaelement.js 来播放 html5 视频。谷歌浏览器中有一些奇怪的东西。他播放一个视频,但不想播放 mp4 格式的另一个视频,也不想回退到 webm。两个视频都是用 ffmpeg 转换的,参数如下:

ffmpeg -i input.mov -acodec libfaac -ab 96k -vcodec libx264 -vpre slower -vpre main -level 21 -refs 2 -b 345k -bt 345k -threads 0 -s 640x360 output.mp4

此外,第一个视频播放正常,没有使用 mp4 格式的 mediaelement.js 库,第二个视频变成了 webm 格式。

示例页面来自http://random.net.ua/video_test/

  • http://random.net.ua/video_test/video1.html(好的)
  • http://random.net.ua/video_test/video2.html(好的)
  • http://random.net.ua/video_test/video1-mediaelement.html(好的)
  • http://random.net.ua/video_test/video2-mediaelement.html(失败)
4

3 回答 3

14

如果您尝试$("video").get(0).currentSrc在控制台中执行或等效操作,您会看到 non-mediaelement.js 版本正在播放 Webm 视频,Chrome 可以正常播放,但如果您在 mediaelement.js 版本中查看相同的内容,它正在尝试播放 MP4。

然后,如果你看一下,$("video").get(0).error你会发现你有一个 MediaError。检查它,你会看到它有“代码 4”。根据规范,即 MEDIA_ERR_SRC_NOT_SUPPORTED。

现在,试试$("video").get(0).canPlayType("video/mp4")——它返回"maybe".

现在这是猜测,但 Chrome 可能会报告“可能”,因为它可以播放 MP4 的某些配置文件,但不能播放其他配置文件。不管是什么原因,我个人更喜欢 Mediaelement.js 将“可能”视为“否”,如果其他源类型都不能原生播放,则继续启动 Flash 后备。修补它很容易做到这一点。我已经在我刚刚制作的叉子上做到了这一点——看看https://github.com/tremby/mediaelement/tree/maybe-to-no

希望有帮助。让我知道它是否适合你——我希望它会放弃 MP4 并在你的情况下尝试使用 Webm。在我自己的项目中(调试让我想到了这个问题)我只有一个 MP4 文件,并且 Flash 后备很高兴取代它。

于 2012-12-01T00:28:51.013 回答
0

using the Media Source API...

I realise this doesn't relate to the fallback answered above, but I think that its important to point out that fallback to webm isn't required if the MP4 videos are encoded appropriately.

MP4 video can also be encoded to support the the Media Source API which allows downloading of chunks that make the video available before the entire file has completed downloading.

The MP4 implementation is more widely used and wouldn't require a webm fallback in most browsers.

A chart showing the video format support for the Media Source API here.

FFmpeg will do this, and its opensource.

See here: (Encode h.264 and WebM videos for MediaElement.js using FFmpeg) below:


Chris Coulson writes: June 14th,2012 (Windows)

I recently added a video player to a client’s site. I found John Dyer’s MediaElement.js to be an excellent solution for doing this. As long as you provide both an h.264 and WebM encoded version of the video, it will play natively on almost all browsers. For unsupported browsers it will fall back to Flash.

The client’s videos were all wmv’s, so they would need to be converted to h.264 and WebM. Luckily John also provided some directions for encoding to these formats using FFmpeg:

http://johndyer.name/ffmpeg-settings-for-html5-codecs-h264mp4-theoraogg-vp8webm/

Unfortunately FFmpeg has changed since the commands were published, so some slight modifications were required. I also made some modifications so that the aspect ratio of the video was preserved and to encode the video at a lower bit rate and faster speed. As well, some of the videos being converted were really short, and would be finished before the 10 second mark that the thumbnail is created at. To solve this problem I modified the script to attempt to capture the thumbnail at the 1, 2, 3, 5 and 10 second mark with each successful capture overwriting the last.

Here’s the updated batch file that I used:

REM mp4 (H.264 / AAC)
"c:\program files\ffmpeg\bin\ffmpeg.exe" -y -i %1 -vcodec libx264 -pix_fmt yuv420p -vprofile high -preset fast -b:v 500k -maxrate 500k -bufsize 1000k -vf scale=trunc(oh*a/2)*2:480 -threads 0 -acodec libvo_aacenc -b:a 128k %1.mp4

REM webm (VP8 / Vorbis)
"c:\program files\ffmpeg\bin\ffmpeg.exe" -y -i %1 -vcodec libvpx -quality good -cpu-used 5 -b:v 500k -maxrate 500k -bufsize 1000k -vf scale=trunc(oh*a/2)*2:480 -threads 0 -acodec libvorbis -f webm %1.webm

REM jpeg (screenshot at 10 seconds, but just in case of a short video - take a screenshot earlier and overwrite)
"c:\program files\ffmpeg\bin\ffmpeg.exe" -y -i %1 -ss 1 -vframes 1 -r 1 -vf scale=trunc(oh*a/2)*2:480 -f image2 %1.jpg
"c:\program files\ffmpeg\bin\ffmpeg.exe" -y -i %1 -ss 2 -vframes 1 -r 1 -vf scale=trunc(oh*a/2)*2:480 -f image2 %1.jpg
"c:\program files\ffmpeg\bin\ffmpeg.exe" -y -i %1 -ss 3 -vframes 1 -r 1 -vf scale=trunc(oh*a/2)*2:480 -f image2 %1.jpg
"c:\program files\ffmpeg\bin\ffmpeg.exe" -y -i %1 -ss 5 -vframes 1 -r 1 -vf scale=trunc(oh*a/2)*2:480 -f image2 %1.jpg
"c:\program files\ffmpeg\bin\ffmpeg.exe" -y -i %1 -ss 10 -vframes 1 -r 1 -vf scale=trunc(oh*a/2)*2:480 -f image2 %1.jpg

I also created a seperate batch file that will iterate over all wmv’s in a given directory and run the encoder batch against each file:

for /r %1 %%i in (*.wmv) do "c:\program files\ffmpeg\CreateWebVideos.bat" %

Faron Coder says: September 3, 2014 at 6:52 pm (*nix)

Hello –</p>

For those who use unix based ffmpeg – here’s the corresponding to author’s codes (above) in name of unix.

ffmpeg -y -i $fileid -vcodec libx264 -pix_fmt yuv420p -vprofile high -preset fast -b:v 500k -maxrate 500k -bufsize 1000k -vf “scale=trunc(oh*a/2)*2:480″ -threads 0 -acodec libvo_aacenc -b:a 128k “$file.mp4″ < /dev/null

ffmpeg -y -i $fileid -vcodec libvpx -quality good -cpu-used 5 -b:v 500k -maxrate 500k -bufsize 1000k -vf "scale=trunc(oh*a/2)*2:480" -threads 0 -acodec libvorbis -f webm "$file.webm" < /dev/null

ffmpeg -y -i $fileid -ss 1 -vframes 1 -r 1 -vf "scale=trunc(oh*a/2)*2:480" -f image2 "$file.jpg" < /dev/null
ffmpeg -y -i $fileid -ss 2 -vframes 1 -r 1 -vf "scale=trunc(oh*a/2)*2:480" -f image2 "$file.jpg" < /dev/null
ffmpeg -y -i $fileid -ss 3 -vframes 1 -r 1 -vf "scale=trunc(oh*a/2)*2:480" -f image2 "$file.jpg" < /dev/null
ffmpeg -y -i $fileid -ss 5 -vframes 1 -r 1 -vf "scale=trunc(oh*a/2)*2:480" -f image2 "$file.jpg" < /dev/null
ffmpeg -y -i $fileid -ss 10 -vframes 1 -r 1 -vf "scale=trunc(oh*a/2)*2:480" -f image2 "$file.jpg" < /dev/null 

Hope that helps.

于 2014-09-14T02:54:55.160 回答
-1

这是一个对我有用的简单解决方案。我的问题是在 Chrome 29 上播放 MP4 视频文件。在浏览了 WWW 上的一堆类似线程并尝试了一堆带有扩展名的东西等之后,我找到了这个解决方案。这就是有效的:

在该页面上的 chrome 地址栏中键入 chrome:flags 搜索“硬件”

启用“硬件加速视频解码”。然后重新启动它

这将允许您在 chrome 上播放 mp4 - 如果您尝试这样做,则可以投射到 chromecast。

于 2013-09-23T18:56:57.960 回答