HTML5 嵌入式视频无法在移动设备上加载

Question

我最近在本网站的主页上使用 MP4 和 Webm 嵌入了一个 HTML5：

http://www.doubleconcentrate.com

它在 PC 和 Mac 上自动加载和循环播放，但在 iPhone 和 Android 上视频有一个播放按钮但根本无法播放。

在 iPhone 4 上更是如此，播放按钮上有一条横线。

这里有什么帮助吗？

谢谢

Answer 1

就在今天 (MP4 video unable to play on tablet/mobile) 的一个类似问题中出现了这个问题。

您的问题有点不同，因为您包含了页面和视频本身，这使得检查更容易（谢谢！）。

首先要注意的是，在上面问题的回答中提到：

... you may not want [a video in a browser] automatically to play on a Mobile device as with some price plans you may be running up data costs for your users - this is a key reason auto play of videos on mobile devices is not historically supported. There are various workaround people have tried but I'm not sure there is one that works universally, and you really need to think about whether you actually want to do this.

检查 iOS 设备上的视频，即使用户点击播放按钮，它似乎也不想播放。这可能是一个格式问题，一个非常常见的例子是带有编解码器或配置文件的 mp4 phone 不支持（mp4 是 'container' 并且它可以支持不同格式的视频流，而不是所有的特定设备可能支持）。

如果您可以直接 link 提供视频本身，应该可以检查它。

如果你想自己检查，那么 ffprobe ((https://www.ffmpeg.org/ffprobe.html) will provide info on code, framerate, profile etc. For example the following is the output when looking at one of the BigBuckBunny (https://peach.blender.org) 视频：

ffprobe version 2.6.1 Copyright (c) 2007-2015 the FFmpeg developers
  built with llvm-gcc 4.2.1 (LLVM build 2336.11.00)
  configuration: --prefix=/Volumes/Ramdisk/sw --enable-gpl --enable-pthreads --enable-version3 --enable-libspeex --enable-libvpx --disable-decoder=libvpx --enable-libmp3lame --enable-libtheora --enable-libvorbis --enable-libx264 --enable-avfilter --enable-libopencore_amrwb --enable-libopencore_amrnb --enable-filters --enable-libgsm --enable-libvidstab --enable-libx265 --disable-doc --arch=x86_64 --enable-runtime-cpudetect
  libavutil      54. 20.100 / 54. 20.100
  libavcodec     56. 26.100 / 56. 26.100
  libavformat    56. 25.101 / 56. 25.101
  libavdevice    56.  4.100 / 56.  4.100
  libavfilter     5. 11.102 /  5. 11.102
  libswscale      3.  1.101 /  3.  1.101
  libswresample   1.  1.100 /  1.  1.100
  libpostproc    53.  3.100 / 53.  3.100
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from '/folder/big_buck_bunny_720p_h264.mov':
  Metadata:
    major_brand     : qt  
    minor_version   : 537199360
    compatible_brands: qt  
    creation_time   : 2008-05-27 18:36:22
    timecode        : 00:00:00:00
  Duration: 00:09:56.46, start: 0.000000, bitrate: 5589 kb/s
    Stream #0:0(eng): Video: h264 (Main) (avc1 / 0x31637661), yuv420p(tv, bt709), 1280x720, 5146 kb/s, 24 fps, 24 tbr, 2400 tbn, 4800 tbc (default)
    Metadata:
      creation_time   : 2008-05-27 18:36:22
      handler_name    : Apple Alias Data Handler
      encoder         : H.264
    Stream #0:1(eng): Data: none (tmcd / 0x64636D74) (default)
    Metadata:
      creation_time   : 2008-05-27 18:36:22
      handler_name    : Apple Alias Data Handler
      timecode        : 00:00:00:00
    Stream #0:2(eng): Audio: aac (LC) (mp4a / 0x6134706D), 48000 Hz, 5.1, fltp, 437 kb/s (default)
    Metadata:
      creation_time   : 2008-05-27 18:36:22
      handler_name    : Apple Alias Data Handler

HTML5 嵌入式视频无法在移动设备上加载

HTML5 Embedded Video not loading on mobile

html

video

android

ios