云上有“数”系列实验(1)——利用OSS搭建在线教育视频课程分享网

本文涉及的产品
云服务器 ECS,每月免费额度200元 3个月
对象存储 OSS,20GB 3个月
云服务器ECS,u1 2核4GB 1个月
简介: 本场景将基于一台配置了CentOS 7.7的ECS实例(云服务器)和OSS资源。通过本教程的操作,您可以在ECS实例上搭建在线教育网站,从OSS中上传数据,可以开通OSS传输加速对OSS数据进行加速访问,并且可以设置生命周期对OSS进行降本增效。

实验地址:https://developer.aliyun.com/adc/scenario/be2b2fb7045a4de7b35d1a3a1f65e466?spm=a2c6h.28467861.J_4392155360.3.695e7832e6K2Sv

实验步骤:

1.在RAM用户登录框中单击下一步,并复制粘贴页面左上角的子用户密码到用户密码输入框,单击登录。

image.png

复制下方地址,在Chromium浏览器打开新页签,粘贴并访问云服务器ECS控制台。

https://ecs.console.aliyun.com

image.png

在连接与命令对话框的通过Workbench远程连接区域中,单击立即登录。

image.png

2.在ECS命令行界面,执行如下命令,在/alidata/www/default目录下创建新目录edu。

mkdir /alidata/www/default/edu

image.png

执行如下命令,编辑index.html文件。

vim /alidata/www/default/edu/index.html

image.png

按下i键进入编辑模式,将如下代码复制并粘贴到文件中。

image.png

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>在线教育</title>
  <meta name="keywords" content="在线教育">
  <meta name="description" content="在线教育">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <!--Favicon-->
  <link rel="shortcut icon" href="" title="Favicon">
  <style>
    @media all and (orientation : portrait) {
   
   

      /*竖屏*/
      .mypic {
   
   
        width: 80%;
      }
    }

    @media all and (orientation : landscape) {
   
   

      /*横屏*/
      .mypic {
   
   
        width: 40%;
      }
    }

    a {
   
   
      color: #000000;
    }

    a:link {
   
   
      color: #000000;
    }

    a:visited {
   
   
      color: #000000;
    }

    a:hover {
   
   
      color: #000000;
    }

    a:active {
   
   
      color: #000000;
    }
  </style>
</head>

<body style=" font-family: 'Microsoft JhengHei UI';">
  <div id="wrapper" style=" margin: 0 15px; padding: 15px 0; position: relative;">
    <div style="padding:20px;">
         <p><font size="10" color="green">在线教育网</font></p>
        <p><font size="3" >您贴身的教育管家</font></p>
    </div>
<p style="text-align:center"><font size="6" color="green">您可在此获取到丰富的教学视频,充分满足学习要求</font></p>
    <div style="padding:50px;">
      <h1 style="text-align:center">精选课程</h1>
      <p style="text-align:center">口碑好,效益佳</p>

<div>
<table style="float: center;">
            <tbody>
               <tr>
                  <td>
                     <b>
                        <center>        
      <div class="video">
      <video width="320" height="240" controls>
      <source src="movie.mp4" type="video/mp4">
      </video>
      <p>实战视频1</p>
      <p>您可以在此视频学习相关内容1</p>
     </div>   
                      </center>
                     </b>
                  </td>
                  <td>
                     <b></b>
                     <center><b>       
      <div class="video">
      <video width="320" height="240" controls>
      <source src="movie.mp4" type="video/mp4">
      </video>
      <p>实战视频2</p>
      <p>您可以在此视频学习相关内容2</p>
     </div>
                  </b></center>
                  </td>
                  <td>
                     <b>
                        <center>
      <div class="video">
      <video width="320" height="240" controls>
      <source src="movie.mp4" type="video/mp4">
      </video>
      <p>实战视频3</p>
      <p>您可以在此视频学习相关内容3</p>
     </div> 
                     </center>
                     </b>
                  </td>
                  <td>
                     <b>
                        <center>
      <div class="video">
      <video width="320" height="240" controls>
      <source src="movie.mp4" type="video/mp4">
      </video>
      <p>实战视频4</p>
      <p>您可以在此视频学习相关内容4</p>
     </div> 
                     </center>
                     </b>
                  </td>
               </tr>
            </tbody>
         </table>
</div>

      <h1 style="text-align:center">观看金牌讲师直播</h1>
      <p style="text-align:center">所有导师来自名企,有多年教学经验</p>


<div>
<table style="float: center;">
            <tbody>
               <tr>
                  <td>
                     <b>
                        <center>        
      <div class="video">
      <video width="320" height="240" controls>
      <source src="movie.mp4" type="video/mp4">
      </video>
      <p>张佳佳</p>
      <p>擅长教学产品知识</p>
     </div>   
                      </center>
                     </b>
                  </td>
                  <td>
                     <b></b>
                     <center><b>       
      <div class="video">
      <video width="320" height="240" controls>
      <source src="movie.mp4" type="video/mp4">
      </video>
      <p>李文</p>
      <p>多年web开发经验</p>
     </div>
                  </b></center>
                  </td>
                  <td>
                     <b>
                        <center>
      <div class="video">
      <video width="320" height="240" controls>
      <source src="movie.mp4" type="video/mp4">
      </video>
      <p>王杰</p>
      <p>专攻大数据计算</p>
     </div> 
                     </center>
                     </b>
                  </td>
                  <td>
                     <b>
                        <center>
      <div class="video">
      <video width="320" height="240" controls>
      <source src="movie.mp4" type="video/mp4">
      </video>
      <p>刘子雯</p>
      <p>运营专家</p>
     </div> 
                     </center>
                     </b>
                  </td>
               </tr>

            </tbody>
         </table>
</div>


      <p style=" margin: 0 auto; text-align: center; ">
        <img class="mypic" src=""
          style=" vertical-align: middle;  text-align: center;">
      </p>
      <p>
        更多:
        <a style=" font-size:14px; font-family: 'Microsoft JhengHei UI'" href="aliyun.com"
          target="_blank">aliyun.com</a>
      </p>
      <p>电话号码:xxxxx;</p>
    </div>
  </div>
  <div style="text-align: center; margin: 0px; width: 100%; font-size: 14px; font-family: 'Microsoft JhengHei UI';">
    @
    <a href="https://beian.miit.gov.cn/" target="_blank" style="text-decoration:none">京ICP备15047403-1</a>
  </div>
</body>

</html>

添加完成后,按下Esc键,输入:wq后按下Enter键保存并退出。

image.png

在浏览器打开新页签,在地址栏输入http:///edu,访问在线教育网站。(请填写个人公网地址)

image.png

image.png

3.在Chromium浏览器中打开新页签,复制下方OSS地址到地址栏中,进入后可看到预览的视频。

https://labfileapp.oss-cn-hangzhou.aliyuncs.com/storage/%E5%AF%B9%E8%B1%A1%E5%AD%98%E5%82%A8OSS%E4%BA%A7%E5%93%81%E8%A7%86%E9%A2%91.mp4

在预览的视频上,右键单击视频另存为。

image.png

在所有文件对话框中,选择桌面,单击保存。

image.png

复制下方地址,在Chromium浏览器打开新页签,粘贴并访问对象存储OSS控制台。

https://oss.console.aliyun.com/

在Bucket列表页面,找到实验室提供的Bucket,单击Bucket名称。

image.png

在文件列表页面 ,单击上传文件。

image.png

在上传文件页面,单击扫描文件。

image.png

在打开文件对话框中,选择刚刚下载的对象存储OSS产品视频 ,单击打开。

image.png

在上传文件页面,当上传文件的状态为已扫描待上传后,单击上传文件。

image.png

返回如下页面,表示文件上传成功。

image.png

OSS传输加速功能,专门应对传输速度慢,传输距离远,跨境等场景使用,可以帮助用户提高OSS数据访问速度,提升用户体验。

在上传文件页面,单击左上角的Bucket列表,回到Bucket列表页面。

image.png

在注意事项对话框中,单击确定。

image.png

开通之后,需要将域名替换成传输加速域名,才可使传输加速生效。传输加速域名格式为BucketName.oss-accelerate.aliyuncs.com。

您需要将下方地址中的BucketName替换为实验室分配的BucketName,然后输入到浏览器的新页签地址栏中,即可访问传输加速效果的OSS文件。

yytyle20230924222726.oss-accelerate.aliyuncs.com/对象存储OSS产品视频.mp4

在浏览器中打开新页签,输入如下网址,可以查看使用传输加速前后的对比情况。

https://oss-accelerate-test.oss-accelerate.aliyuncs.com/acc/oss-transfer-acc-zh.html

image.png

4.切换回ECS服务器命令行,执行如下命令,编辑index.html文件。

vim /alidata/www/default/edu/index.html

image.png

image.png

修改完成后,按下Esc键,输入:wq后按下Enter键保存并退出。

在浏览器打开新页签,在地址栏输入http:///edu,访问在线教育网站。可查看到网站中可播放相应视频源,并实现一定的加速效果。

image.png

5.OSS生命周期功能可按照规则将部分冷数据转储到低频或者归档中,可有效降低客户音视频存储成本。。

在浏览器中回到OSS管理控制台中。在Bucket列表页面,找到实验室分配的Bucket,单击Bucket名称。

在左侧导航栏中,选择数据管理>生命周期。

image.png

image.png

在生命周期页面,单击创建规则。

本实验以最后一次修改时间为例,超过一定时间数据未修改的,数据将自动转换为低频访问。

如下图所示,将策略选择配置到整个Bucket,规则设置成修改时间 ,天数默认为30天,自动的转换类型设置成低频访问,单击确定。

image.png

image.png

如下图所示,生命周期规则创建成功,状态为启动中。

image.png

实验至此结束。

相关实践学习
借助OSS搭建在线教育视频课程分享网站
本教程介绍如何基于云服务器ECS和对象存储OSS,搭建一个在线教育视频课程分享网站。
相关文章
|
11天前
|
存储 小程序 API
对象存储OSS产品常见问题之前端直传视频获取视频的长度获得多少秒如何解决
对象存储OSS是基于互联网的数据存储服务模式,让用户可以安全、可靠地存储大量非结构化数据,如图片、音频、视频、文档等任意类型文件,并通过简单的基于HTTP/HTTPS协议的RESTful API接口进行访问和管理。本帖梳理了用户在实际使用中可能遇到的各种常见问题,涵盖了基础操作、性能优化、安全设置、费用管理、数据备份与恢复、跨区域同步、API接口调用等多个方面。
31 0
|
1月前
|
机器学习/深度学习 编解码 API
视觉智能平台常见问题之如何将融合后的视频上传至oss
视觉智能平台是利用机器学习和图像处理技术,提供图像识别、视频分析等智能视觉服务的平台;本合集针对该平台在使用中遇到的常见问题进行了收集和解答,以帮助开发者和企业用户在整合和部署视觉智能解决方案时,能够更快地定位问题并找到有效的解决策略。
32 3
|
6月前
|
Java 对象存储
【工具类】使用阿里oss实现图片、视频、文档上传
【工具类】使用阿里oss实现图片、视频、文档上传
228 0
|
4月前
|
对象存储
uniapp对接oss视频上传+压缩
uniapp对接oss视频上传+压缩
282 0
|
4月前
|
vr&ar 对象存储
oss视频截封面
oss视频截封面
243 0
|
7月前
|
存储 弹性计算 开发工具
云上有“数”系列实验(2)——基于OSS搭建云上个人博客
在本场景中我们将以Hexo静态博客为例,演示如何通过Hexo博客框架快速生成静态博客,以及如何使用Hexo插件将生成的静态博客自动部署至阿里云OSS。
|
7月前
|
存储 弹性计算 对象存储
借助OSS搭建在线教育视频课程分享网站
本教程介绍如何基于云服务器ECS和对象存储OSS,搭建一个在线教育视频课程分享网站。
433 0
|
弹性计算 数据安全/隐私保护 对象存储
借助OSS搭建在线教育视频课程分享网站-1
借助OSS搭建在线教育视频课程分享网站-1
295 0
借助OSS搭建在线教育视频课程分享网站-1
|
弹性计算 对象存储
借助OSS搭建在线教育视频课程分享网站-2
借助OSS搭建在线教育视频课程分享网站-2
221 0
借助OSS搭建在线教育视频课程分享网站-2
|
对象存储
如何使用OSS视频截帧功能快速生成视频预览
OSS作为对象存储产品,主要提供的是海量非结构化数据的存储,其中绝大部分都是视频和图片等富媒体数据,针对该场景的需求,OSS提供了丰富的图片处理功能来帮助用户更加方便的对存储于OSS上的图片数据进行加工,从而减少了对于流量、CPU等资源的消耗。
11876 0