分享OBS上存储的小视频

举报
风中有朵犇犇云 发表于 2019/07/11 11:58:57 2019/07/11
【摘要】 故事的起因曾经把电脑里的很多照片、视频都上传到OBS中进行了备份。今天翻出来,发现有一个视频当时拍的很好,很有意义:是当年的老友们一起在夜里放孔明灯的视频。。。第一想法,就是发给大家看一看,重温一下。。。那很简单:下载到手机上微信给大家不就OK了!Or 把视频文件的路径发给大家,大家下载下来就可以播放了!没错!!!然鹅,我偏不!哈哈!IT人的特质:学以致用(正巧今天看了静态网站托管的介绍,感...

故事的起因

曾经把电脑里的很多照片、视频都上传到OBS中进行了备份。今天翻出来,发现有一个视频当时拍的很好,很有意义:是当年的老友们一起在夜里放孔明灯的视频。。。第一想法,就是发给大家看一看,重温一下。。。

那很简单:下载到手机上微信给大家不就OK了!

Or 把视频文件的路径发给大家,大家下载下来就可以播放了!

没错!!!

然鹅,我偏不!哈哈!IT人的特质:学以致用(正巧今天看了静态网站托管的介绍,感觉可以参考,何不试试看)。

动起手来

想法:做个页面,把视频文件嵌入到页面中,支持控制器播放,然后把页面链接发给大家,就可以了。

前提:视频文件上传至OBS某桶中

1.       获取视频文件的OBS路径:

复制路径.PNG

例如:https://website.obs.cn-north-1.myhuaweicloud.com/MVI_0079.MOV

2.       编辑一个index.html

                <html>

                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                <head>             

                </head>

                <body style="background-color:yellow">

                <h2 style="background-color:red">朋友们,记得当年一起放的孔明灯吗?</h2>

                <h3 style="background-color:green">一起来重温一下。。。</h3>

                </body>                 

                </html>

                <video width="658" height="444" style="clear:both;display:block;margin:auto"

                poster="https://website.obs.cn-north-1.myhuaweicloud.com/index.PNG" autoplay="autoplay" preload="none" controls="controls">

                <source src="***视频文件的OBS路径*** " />

                </video>

    备注:<source src=”” />可以参考上面的代码,最重要的是红色字体部分,填上第一步获取的视频文件的路径;

               Poster字段是避免视频无法播放,展示的图片,可以去掉这个字段

3.       上传index.html配置index.html为公共读

上传-1.PNG

4.       获取路径,发送给大家:


例如:https://website.obs.cn-north-1.myhuaweicloud.com/index.html

5.       效果图(请忽略页面的丑陋。。。)

效果.PNG


【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。