Question

开发环境：https://cd-lb-2005177905.eu-west-2.elb.amazonaws.com/

我正在尝试做一些简单的事情，让视频工作。如果你点击它播放的女孩的视频图像 - 除非你在iPad或iPhone上，我不知道为什么。

我正在使用https://www.npmjs.com/package/react-html5video

组件（摘录）：

type Props = { videoURL: String, posterImageURL: String };

const VideoJumbotron = ({ videoURL, posterImageURL }: Props) => (
  <div className={s.videoWrapper}>{console.log('posterImageURL', posterImageURL)}
    <Video
      poster={posterImageURL}
      controls={[]}
      onClick={function clickHandler(event) {
        event.persist();
        console.log(event, event.target);
        const video = event.target;
        try {
          if (video.paused) {
            video.play();
          } else {
            video.pause();
          }
        } catch (e) {
          console.log(e);
        }
      }}
    >
      <source
        src={`${videoURL}.mp4`}
        type="video/mp4"
      />
      <source
        src={`${videoURL}.webm`}
        type="video/webm"
      />
    </Video>
  </div>
);

父组件（摘录）：

render() {
       ...
          <VideoJumbotron
            videoURL="/videos/clothes-doctor"
            posterImageURL="/videos/images/clothes-doctor.png"
          />
       ...
    );
  }

所以，我经历了一些想法：

我想知道它是否与编解码器相关并且看起来here - 但似乎它们支持我所拥有的，mp4 H.264, AAC（我也有一个webm版本，但他们不会使用它）。

我把它放到youtube上并给了youtube网址，但它似乎试图下载整个内容（216.4Mb）......

我想知道它是否是字节范围支持（也称为内容范围或部分范围支持），所以我做了cURL测试：

curl --range 0-99 https://cd-lb-2005177905.eu-west-2.elb.amazonaws.com/videos/clothes-doctor.mp4 -o /dev/null -k

然后回来了：

  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   100  100   100    0     0    133      0 --:--:-- --:--:-- --:--:--  2272

这似乎是正确的......

（有一件奇怪的事情是当我在Chrome中查看来源时我得到了：

<video class="rh5v-DefaultPlayer_video" poster="/videos/images/clothes-doctor.png" data-reactid="76"><source src="/videos/clothes-doctor.mp4" type="video/mp4" data-reactid="77"/><source src="/videos/clothes-doctor.webm" type="video/webm" data-reactid="78"/></video>

但在firefox中我得到了：

<video class="rh5v-DefaultPlayer_video" poster="/videos/images/clothes-doctor.png" data-reactid="94"><source src="/videos/clothes-doctor.mp4" type="video/webm" data-reactid="95"/></video>

^^怎样才能有不同的文件扩展名？（它是否检测到原始编码？

无论如何，对此有任何帮助将不胜感激......

无法在iPhone和iPad上播放视频

0 个答案: