zl程序教程

您现在的位置是:首页 >  其他

当前栏目

Gatsby 中怎么加载使用视频文件?

2023-03-20 15:42:54 时间
一、简介

Gatsby 项目中怎么播放视频?

二、解决方案
1、HTML5 <video>

使用 HTML5 的 video 标签,播放 本地视频 和 远程视频。

import * as React from 'react'
import dog from '../assets/dog.mp4'

const VideoShow = () => {

    return (
        <div>
            <video width="70%" controls>
                <source src={dog} type="video/mp4" />
            </video>

            <video width="70%" controls>
                <source src="https://api.learn-anything.cn/uploads/dog_14be0bfb5a.mp4" type="video/mp4" />
            </video>
        </div>
    )
}

export default VideoShow;
三、参考文档