借助OSS搭建在线教育视频课程分享网站-阿里云的课程体验和记录

LegendNoTitle 2024-04-09 原文

今天看到阿里云有一个《借助OSS搭建在线教育视频课程分享网站》的课程，记录一下里面的内容。

首先是创建一个资源,大概要等1-2分钟。

1. 创建资源
开始实验之前，您需要先创建相关实验资源。
在体验实验室，单击创建资源。
（可选）在实验室页面左侧导航栏中，单击云产品资源列表，可查看本次实验资源相关信息（例如IP地址、用户信息等）。说明：资源创建过程需要1~3分钟。

好家伙，创建完资源之后是一张……图片？

接着我注意到了底部的边框和左上角的快捷方式，我以为只是一个frame内嵌网页罢了……没想到……

好家伙，我直呼好家伙，原来是云电脑，怪不得要等个两分钟，原来是初始化云电脑去了。

OK，时间已经浪费了10分钟了。

需要的东西都可以在左边找

2. 连接ECS服务器

本步骤将指导您如何使用Workbench远程连接ECS服务器。

双击打开虚拟桌面的Chromium浏览器。

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

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

https://ecs.console.aliyun.com

在左侧导航栏中，选择实例与镜像>实例。

在实例页面顶部，选择资源所在地域。例如下图中，地域切换为华东2（上海）。

在实例页面，找到您的ECS实例，单击操作列下的远程连接。

说明：您可在云产品资源列表中查看目标实例的实例ID。

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

在登录实例对话框中，输入ECS服务器的密码，单击确定。

说明：您可以在云产品资源列表中查看到您的ECS服务器密码。

返回如下页面，表示您已经成功远程连接到ECS服务器。

3. 创建在线教育网站界面

本步骤将指导您创建HTML，创建完成后，通过浏览器访问相应地址，可看到在线教育网站。

在ECS命令行界面，复制并执行以下命令，将在根目录下创建新目录。

mkdir /alidata/www/default/edu

执行命令后，将返回如下界面。

复制并执行以下命令，命令行将跳转到如下界面，在此可编辑index.html文件。

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

按下 i 键进入编辑模式。

将如下代码复制并粘贴：

<!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键保存并退出。

以上操作后，将返回命令行界面。

在浏览器打开新页签，在地址栏输入http://<ECS公网地址>/edu，访问在线教育网站。创建的网站如图所示：

说明：ECS公网地址可在云产品资源列表查看。

emmm,OK

其实就是教你简单用了一下cd切到目标文件夹，然后用vim编辑文件，把它的代码丢进去。

我的效果是这样的：

4. 上传数据至OSS

OSS对象存储可上传数据进行存储。本步骤指导您如何在OSS中上传数据。

打开新的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

在预览的视频上，右键点击视频另存为。

弹出如下对话框，点击桌面，点击保存。OSS视频数据将下载保存在桌面上。

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

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

在左侧导航栏中，选择Bucket列表，找到云产品资源提供的Bucket名称。

点击Bucket名称，进入如下界面。

在界面点击文件管理-文件列表。在右侧功能框中，点击上传文件。

右侧产生新的界面后，下拉找到扫描文件，并点击。

在弹出的对话框中找到桌面上下载的对象存储OSS产品视频，点击打开，待文件出现在下图所示中，状态为已扫描待上传，点击上传文件。

11. 可看到如下界面，文件上传成功。

5. 开通并使用OSS传输加速

OSS传输加速功能，专门应对传输速度慢，传输距离远，跨境等场景使用，可以帮助用户提高OSS数据访问速度，提升用户体验。本步骤将指导您开通并使用OSS传输加速。

点击左上角Bucket列表，回到Bucket列表界面，如下图所示，找到Bucket名称，并在右侧的传输加速这一栏，点击开启。

在弹出的对话框中，如下图所示，点击确定即可开通。

开通后传输加速状态为已开启。

开通之后，需要将域名替换成传输加速域名，才可使传输加速生效。传输加速域名格式为BucketName.oss-accelerate.aliyuncs.com。将BucketName替换后，按照以下网址，输入到新的浏览器页签，即可访问传输加速效果的OSS文件。

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

访问效果如下所示：

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

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

网站如下所示：

6. 在服务器后台html中插入OSS视频源

在步骤3的html中插入OSS视频源，完成后，登录网站可浏览视频，达到网站教学视频的分享效果。

切换回ECS服务器命令行。

复制并执行以下命令，编辑index.html文件。

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

按下 i 键进入编辑模式。

按照如下所示找到实战视频2，将source src中的movie.mp4替换成如下域名，BucketName需替换成云产品资源列表中的BucketName。

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

替换后如下所示：

按下 Esc 键后，输入 :wq 后按下Enter键保存并退出。

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

备注：若您需要使用CDN加速，您可参照以下地址进行CDN配置。

https://help.aliyun.com/document_detail/123226.html

CDN内容分发服务可帮助您，在数据资源量重复下载的情况下，可有效缓存到CDN节点，并加速访问，同时可配置源站OSS，进行源数据读取。

7. OSS配置生命周期

OSS生命周期功能可按照规则将部分冷数据转储到低频或者归档中，可有效降低客户音视频存储成本。本步骤将指导您如何配置生命周期。

在浏览器中回到OSS界面，点击进入相应的Bucket。

在如下界面中，点击数据管理-生命周期，进入生命周期管理界面。

点击下图的创建规则按钮，对生命周期进行规则设置。

本次设置以最后一次修改时间为例，超过一定时间数据未修改的，数据将自动转换。如下图所示，将策略选择配置到整个Bucket，规则设置成修改时间，天数默认为30天，自动的转换类型设置成低频访问。点击确定。

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

通过本次实验您获得了

基于ECS环境，实现在线教育网站前端界面的开发与浏览

创建bucket，并上传数据至OSS

开通并使用OSS传输加速

接入教学视频url链接，从浏览器访问在线教育网站oss视频

OSS生命周期管理设置

本场景使用到的云产品

对象存储oss

云服务器ECS

还是我高看了它，不过对初学者来讲比较适合，就是简单的linux文件操作，内嵌视频文件链接和简单的阿里云控制台操作。

还另外试了试，阿里云用于操作的云电脑，可以看B站，但是没有声音

还拿speedtest中国版测了一下速，这个结果有点小离谱

没有你这样的上下不对等吧哈哈哈

有关借助OSS搭建在线教育视频课程分享网站-阿里云的课程体验和记录的更多相关文章

西安华为OD面试体验 - 2
西安华为OD面试体验开始投简历技术面试进展工作进展开始投简历去年一整年一直在考研和工作之间纠结，感觉自己的状态好像当时的疫情一样差劲。之前刚毕业的时候投了个大厂的简历，结果一面写算法的时候太拉跨了，虽然知道时dfs但是代码熟练度不够，放在平时给足时间自己可以调试通过，但是熟练度不够那面试当时就写不出来被刷了。说真的算法学到后期我感觉最重要的是熟练度和背板子（对于我这种普通玩家来说），面试题如果一上来短时间内想不出思路就完蛋了。然后由于当时找的工作不是很理想就又想考研了。但是考研是有风险的，我自我感觉自己可能冲不上那个学校，而找工作一个没成可以继续找嘛。本着抱着试试看的态度在boss上投了简历，
最新版人脸识别小程序图片识别生成二维码签到地图上选点进行位置签到计算签到距离课程会议活动打卡日常考勤上课签到打卡考勤口令签到 - 2
技术选型1，前端小程序原生MINA框架cssJavaScriptWxml2，管理后台云开发Cms内容管理系统web网页3，数据后台小程序云开发云函数云开发数据库（基于MongoDB）云存储4，人脸识别算法基于百度智能云实现人脸识别一，用户端效果图预览老规矩我们先来看效果图，如果效果图符合你的需求，就继续往下看，如果不符合你的需求，可以跳过。1-1，登录注册页可以看到登录页有注册入口，注册页如下我们的注册，需要管理员审核，审核通过后才可以正常登录使用小程序1-2，个人中心页登录成功以后，我们会进入个人中心页我们在个人中心页可以注册人脸，因为我们做人脸识别签到，需要先注册人脸才可以进行人脸比对，进
Java IP归属地查询（离线方式+在线方式，内附查询IP方法） - 2
一、离线方式1.1.下载ip2region.xdbGitHub项目地址：https://github.com/lionsoul2014/ip2region我们首先需要下载一个ip2region.xdb的文件下载地址：https://github.com/lionsoul2014/ip2region/blob/master/data/ip2region.xdb打开后点击如图的Download图标即可下载。下载完成后，需要将该文件放到我们的项目中。ps：我是直接放到服务器的，因为放在项目的资源文件夹下，当我们调试的时候使用JavaSpring自带的工具去获取该文件的绝对路径时，没有任何问题，能够正
「想体验ChatGPT中文聊天？」那快进来，你用不上算我输 - 2
♥️作者：白日参商🤵‍♂️个人主页：白日参商主页♥️坚持分析平时学习到的项目以及学习到的软件开发知识，和大家一起努力呀！！！🎈🎈加油！加油！加油！加油🎈欢迎评论💬点赞👍🏻收藏📂加关注+！「想体验ChatGPT中文聊天？」那快进来，你用不上算我输项目场景：项目条件一、那就开始吧1、安装ChatGPT-Desktop2、OpenAPI设置二、使用实例恭喜你！！！配置成功了！！！API和URL都是博主免费提供给大家的！！！恭喜你！！！配置成功了！！！API和URL都是博主免费提供给大家的！！！🎈🎈加油！加油！加油！加油🎈欢迎评论💬点赞👍🏻收藏📂加关注+！项目场景：近几个月可以说ChatGPT是火得一
Ruby Compass 编译器不工作，在线错误 [54] - 2
RubyCompass不工作，代码如下，我已经在网上尝试了10-20种方法，有什么建议吗？在屏幕截图中，您会找到一种更简单的方法来读取我的gem的终端转储和错误，如果您想从那里获取一些东西，您会在屏幕截图下方找到文本谢谢，干杯，罗伯特RubyGemsisasophisticatedpackagemanagerforRuby.Thisisabasichelpmessagecontainingpointerstomoreinformation.Usage:gem-h/--helpgem-v/--versiongemcommand[arguments...][options...]Examp
连续3天3场分享，KubeVela@KubeCon EU 2023 抢鲜看！ - 2
自从2019年OpenApplicationModel诞生以来，KubeVela已经经历了几十个版本的变化，并向现代应用程序交付先进功能的方向不断发展。最近，KubeVela完成了向CNCF孵化项目的晋升，标志着社区的发展来到一个新的里程碑。今天，KubeVela社区内活跃着大量来自全球的开发者，共同推动KubeVela项目的落地和发展。在即将开幕的KubeCon+CloudNatvieConEurope2023上，我们惊喜地发现，连续3天，KubeVela项目的贡献者、企业用户和来自阿里云的核心维护者，将从不同角度展对KubeVela项目的分享。让我们先睹为快！🎙️BuildingaPlat
基于RTS超低延时直播优化强互动场景体验 - 2
RTS在阿里云视频直播的基础上进行底层技术优化，通过集成阿里云播放器SDK，支持在千万级并发场景下节点间毫秒级延时直播的能力，弥补了传统直播存在3~6秒延时的问题，确保了超低延时、低卡顿、秒开流畅的直播观看体验。本文介绍了基于RTS超低延迟直播优化强互动场景体验的最佳实践方案，并以阿里云播放器Aliplayer为例，详细介绍RTS超低延迟拉流接入、自动降级、排障信息获取等逻辑的实现，助力企业打造互动直播行业的产品竞争力。适用场景该方案适用于对超低延迟直播有诉求的客户，尤其是业务中存在强互动场景直播的场景。强互动场景直播主要是指对主播和观众存在互动，或观众存在更高实时性观看、画面互动需求的情况，
ruby-on-rails - 在 Facebook、转推等上分享直接 Ruby gem 中的按钮？ - 2
注意http://techcrunch.com/2010/04/04/he-even-makes-coldplay-sound-fun/顶部的那些按钮在社交网络上分享网址？我想为我正在构建的网站做一些非常相似的事情。ShareThis提供了一个可以做同样事情的小部件，但它是品牌化的和外部的。我正在寻找纯Ruby解决方案。包含可包含在RailsApplicationHelper类中的模块的gem将是完美的。在我重新发明轮子之前，感谢您的建议!想象一下: 最佳答案我能找到的最好的是:http://www.addthis.com/这里有
ruby - 我如何让 ruby 在线程内输出异常？ - 2
当我使用Thread.new{}生成一个线程时，该线程中发生的任何异常似乎永远不会出现，应用程序只是悄悄地忽略它最佳答案通常情况下，线程是相互隔离的，因此一个线程中的异常不会终止整个应用程序。但是，虽然我从未使用过它们，但Thread类有几个abort_on_exception方法，甚至还有一些示例。他们应该做你想做的事。http://corelib.rubyonrails.org/classes/Thread.html 关于ruby-我如何让ruby在线程内输出异常？，我们在S
《ChatGPT实用指南》(精编版)重磅发布，全网免费分享，快上车，别掉队 - 2
文/高扬（微信公众号：量子论）据上次3月18号发布的V1.8版，已经过去十天，这期间AI领域发生了很多重大变化。因此，我们对《ChatGPT实用指南》进行了重大改版，增加了大量实用的操作和详细的讲解，保证小白可以轻松上手，快速驾驭ChatGPT。V2.0版本亮点：1、结构更合理。分为基础篇、进阶篇、高级篇，从易到难，由浅入深，符合学习规律。2、内容更充实。扩充了27页的内容，尽量看图说话，将操作步骤一步步地展示出来。3、排版更美观。按图书出版的规范制作，便于知识点查阅。后记：2022年11月底，我们在HackerNews上看到了关于ChatGPT的新闻报道后，开始意识到，人工智能的春天来了，这

借助OSS搭建在线教育视频课程分享网站-阿里云的课程体验和记录

有关借助OSS搭建在线教育视频课程分享网站-阿里云的课程体验和记录的更多相关文章

随机推荐