前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Gatsby 中怎么加载使用视频文件?

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

原创
作者头像
Learn-anything.cn
发布2021-12-02 08:48:52
6900
发布2021-12-02 08:48:52
举报
文章被收录于专栏:learn-anything.cn
一、简介

Gatsby 项目中怎么播放视频?

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

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

代码语言:txt
复制
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;
三、参考文档

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、简介
  • 二、解决方案
    • 1、HTML5 <video>
    • 三、参考文档
    相关产品与服务
    网站建设
    网站建设(Website Design Service,WDS),是帮助您快速搭建企业网站的服务。通过自助模板建站工具及专业设计服务,无需了解代码技术,即可自由拖拽模块,可视化完成网站管理。全功能管理后台操作方便,一次更新,数据多端同步,省时省心。使用网站建设服务,您无需维持技术和设计师团队,即可快速实现网站上线,达到企业数字化转型的目的。
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档