How to play video from Google Photos API

Question

Using the Google Photos API, I'd like to play a video using the <video>...</video> html tag. I tried using the baseUrl, but the video does not play as the baseUrl is just an image.

Here is a sample 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"
},

I feel like that last part, filename, has to be an important part of it. I tried appending it to the baseUrl but returns a 404.

Answer 1

You should append '=dv' after baseUrl. For ex:

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>
        );
    }