谷歌浏览器不想使用mediaelement.js播放mp4

时间:2012-07-09 10:16:29

标签: html5 google-chrome video mp4 mediaelement

我正在使用我网站上最新的mediaelement.js播放html5视频。 Google Chrome中有一些奇怪的东西。 他播放一个视频,但不想播放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(ok)
  • http://random.net.ua/video_test/video2.html(ok)
  • http://random.net.ua/video_test/video1-mediaelement.html(ok)
  • http://random.net.ua/video_test/video2-mediaelement.html(失败)

3 个答案:

答案 0 :(得分:14)

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

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

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

现在这是猜测,但也许Chrome会报道"也许"因为它可以播放MP4的一些配置文件但不能播放不管是什么原因,我个人更喜欢Mediaelement.js来治疗"也许" as" no"如果没有其他源类型可以原生播放,那么继续启动Flash后备。修补它是很容易的。我刚才用叉子完成了这个 - 看看https://github.com/tremby/mediaelement/tree/maybe-to-no

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

答案 1 :(得分:0)

使用Media Source API ...

我意识到这与上面回答的回退无关,但我认为重要的是要指出,如果MP4视频编码得当,则不需要回退到webm。

MP4视频也可以编码为支持Media Source API,允许下载在整个文件下载完成之前使视频可用的块。

MP4实施使用得更广泛,并且在大多数浏览器中都不需要webm后备。

显示媒体源API here的视频格式支持的图表。

FFmpeg将执行此操作及其开源。

见下文:(Encode h.264 and WebM videos for MediaElement.js using FFmpeg)如下:


Chris Coulson写道: 2012年6月14日(Windows)

我最近在客户的网站上添加了一个视频播放器。我发现John Dyer的MediaElement.js是一个很好的解决方案。只要您提供视频的h.264和WebM编码版本,它就会在几乎所有浏览器上本地播放。对于不受支持的浏览器,它将回退到Flash。

客户端的视频都是wmv,所以他们需要转换为h.264和WebM。幸运的是John还使用FFmpeg提供了一些编码这些格式的指示:

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

不幸的是,自命令发布以来,FFmpeg已发生变化,因此需要进行一些细微的修改。我还进行了一些修改,以便保留视频的宽高比,并以较低的比特率和更快的速度对视频进行编码。同样,一些被转换的视频非常简短,并且会在创建缩略图的10秒标记之前完成。为了解决这个问题,我修改了脚本以尝试在1,2,3,5和10秒标记处捕获缩略图,每次成功捕获都会覆盖最后一个。

这是我使用的更新批处理文件:

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

我还创建了一个单独的批处理文件,它将遍历给定目录中的所有wmv,并针对每个文件运行编码器批处理:

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

Faron Coder说:2014年9月3日下午6:52(* nix)

你好 -

对于那些使用基于unix的ffmpeg的人 - 这里是与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 

希望有所帮助。

答案 2 :(得分:-1)

这是一个适合我的简单解决方案。我的问题是在Chrome 29上播放MP4视频文件。我在WWW周围涉及一堆类似的线程后尝试了这个解决方案,尝试了一些带扩展的东西等等。这是有用的:

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

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

这将允许你在chrome上播放mp4 - 如果你想这样做的话,可以转换为chromecast。