如何从 Google Photos API 播放视频

Question

使用Google Photos API，我想使用<video>...</video> html 标记播放视频。我尝试使用baseUrl，但视频无法播放，因为baseUrl 只是一张图片。

这是一个示例mediaItem：

{
  "id": "AGj1epULNh3net3nkDb1kIh3...",
  "productUrl": "https://photos.google.com/lr/photo/some-long-url",
  "baseUrl": "https://lh3.googleusercontent.com/lr/some-really-long-url",
  "mediaMetadata": {
    "creationTime": "2017-08-13T22:09:48Z",
    "width": "1920",
    "height": "1080",
    "video": {
      "cameraMake": "Apple",
      "cameraModel": "iPhone SE",
      "fps": 29.978708303761533,
      "status": "READY"
    }
  },
  "filename": "IMG_2281.MOV"
},

我觉得最后一部分，filename，必须是其中的重要部分。我尝试将其附加到 baseUrl 但返回 404。

Answer 1

您应该在 baseUrl 之后附加“=dv”。例如：

src="https://lh3.googleusercontent.com/lr/some-really-long-url=dv"

Answer 2

_renderVideo(item) {
        const opts = {
            height: '480',
            width: '100%'
        };
        return (
            <div className='image-gallery-image'>
                <div className='video-wrapper'>
                    <center>
                        {
                            item.mimeType === "video/mp4" ?

                                <video width="80%" controls>
                                    <source src={item.embedUrl} type="video/mp4" />
                                </video>

                                :
                                <img style={{width:"80%"}} src={item.original} alt="" />
                        }
                    </center>
                </div>
            </div>
        );
    }

render() {
        let images = [];
        if (this.props.arr_Photo && this.props.arr_Photo.mediaItems) {
            this.props.arr_Photo.mediaItems.map((item, index) => {
                images.push(
                    {
                        original: item.baseUrl,
                        thumbnail: item.baseUrl,
                        embedUrl: item.baseUrl + "=dv",
                        mimeType: item.mimeType
                    }
                );
            });
        };
        return (
            <div className="card">
                <div className="card-body">
                    <h4 className="card-title">
                        xxx
                    </h4>
                    <ImageGallery items={images}
                        renderItem={this._renderVideo}
                        onThumbnailClick={this._onSlide}
                        showPlayButton={false} />
                </div>
            </div>
        );
    }