基于OSS搭建在线教育视频课程分享网站

OSS对象存储服务是海量、安全、低成本、高持久的存储服务。适合于存储大规模非结构化数据，如图片、视频、备份文件和容器/虚拟机镜像等。

安装nginx

wget https://nginx.org/download/nginx-1.20.2.tar.gz

yum -y install zlib zlib-devel gcc-c++ pcre-devel openssl openssl-devel

tar -zxvf nginx-1.20.2.tar.gz

cd nginx-1.20.2

./configure --prefix=/usr/local/nginx/ --with-http_ssl_module --with-http_stub_status_module

make

make install

执行如下命令，进入/usr/local/nginx/sbin目录。

cd /usr/local/nginx/sbin

执行如下命令，启动nginx。

./nginx

通过浏览器访问

http://localhost。返回如下页面，表明nginx安装成功。

创建前端页面

执行如下命令，在/usr/local/nginx/html/目录下创建新文件夹edu。

mkdir /usr/local/nginx/html/edu

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

vim /usr/local/nginx/html/edu/index.html

示例代码

<!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>张XX</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>李X</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>王X</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>刘XX</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="https://www.aliyun.com"

          target="_blank">aliyun.com</a>

      </p>

      <p>电话号码：xxxxx；</p>

    </div>

  </div>

</body>



</html>

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

通过浏览器访问

http://localhost/edu，访问在线教育网站。