【问题标题】:Google Chrome does not want to play mp4 using mediaelement.js谷歌浏览器不想使用 mediaelement.js 播放 mp4
【发布时间】:2014-09-14 11:41:58
【问题描述】:

我在我的网站上使用最新的 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(失败)

【问题讨论】:

  • Mac OS x Lion、chrome 21.0.x 上的同样问题,甚至 mediaelements.js 官方网站首页上的视频也无法播放。但同样的视频在 Windows7 和相同版本的 Chrome 上播放效果很好。
  • 今天刚刚遇到问题,版本 25.0.1319.0 canary 播放在 Firefox 或 safari 上可以正常播放的 mp4 视频
  • 在两台装有 Chrome 24 的 Windows 7 电脑上出现此问题。但同一办公室中的大多数其他 Windows 7 电脑在使用 Chrome 24 时完全没有问题,这使得这是一个非常令人讨厌的奇怪问题。跨度>
  • 通过办公室搜索后,我们发现七台 Chrome 24-26 的 PC 没有显示任何流行的后备解决方案(如 videojs、me.js 或 jw)的视频 - 大约 1/4测试的 PC 有这个问题,并且许多工作设置与非工作设置共享特征 - 没有真正找到合理的原因,除了下面的 me.js 解决方案规避了这个问题。

标签: html google-chrome video mp4 mediaelement


【解决方案1】:

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

然后,如果您查看$("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 后备很高兴取代它。

【讨论】:

  • +1 这困扰了我足够长的时间,直到我找到这个答案,如果可能的话我会投票一百次。谢谢。
【解决方案2】:

使用媒体源 API...

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

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

MP4 实现使用更广泛,在大多数浏览器中不需要 webm 后备。

显示Media Source 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 

希望对您有所帮助。

【讨论】:

    【解决方案3】:

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

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

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

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2017-03-22
      • 2013-12-16
      • 2015-12-03
      • 1970-01-01
      • 2012-01-24
      • 2020-08-28
      • 1970-01-01
      相关资源
      最近更新 更多