如何使用videojs进行小型视频网站的开发

写在前面

本次项目为课堂作业，笔者对于前端的开发以及所用到的各种语言并不是非常的熟练，所用到的方法可能会有舍近求远的情况，如有发现欢迎探讨。这个项目花了不少时间，遇到了很多问题，也用这篇博客进行纪念。

首页大致设计

首页设计的非常简单，仅有简单的顶部横幅（可替换成轮播台，在这里不介绍）和下方的视频列表。展示视频的封面，和标题。一个视频可能不止一集，所以需要考虑到对产生的每一个展示视频的小块都需要有唯一的id进行控制跳转。

通过JavaScript与php与数据库交互

首先通过js代码用POST方法向php文件传送参数，此处为id，其实对于视频首页并不需要什么参数来帮助php在数据库中进行查找，因为在这里只需要查找全部的视频即可，但是在之后也会用到类似方法，于是现在这里写出，后面不再赘述。

var httpRequest = new XMLHttpRequest();//第一步：创建需要的对象
    httpRequest.open('POST', 'xxx.php', true); //第二步：打开连接
    httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");//设置请求头 注：post方式必须设置请求头（在建立连接后设置请求头）
    httpRequest.send('id'+id);//发送请求 

这里通过php进行数据库的连接，查找和json报文的发回。在这里曾遇到一个问题，视频有很多，但是在数组中却只有一个。可以通过代码中while中的方法进行解决。

 //$path=$_POST('path');
    $link = mysqli_connect('localhost','qunzhi','123456','qunzhi');
    if ($link->connect_error){
   
        echo '数据库连接失败！';
        exit(0);
    }
    $sql = "SELECT * FROM video";
    $result =  $link->query($sql);
    while($row = mysqli_fetch_array($result)){
   
        $ros[]=$row;  
    }
     $json = json_encode($ros,JSON_UNESCAPED_UNICODE);
    echo $json;

js文件接收，并将json中的数据存入list，在此交互完成。

httpRequest.onreadystatechange = function () {
   //请求后的回调接口，可将请求成功后要执行的程序写在其中
        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
   //验证请求是否发送成功
            var json = httpRequest.responseText;//获取到服务端返回的数据
            console.log(json);
            list = JSON.parse(json);
            console.log(list);

通过JavaScript生成视频展示模块

			var str = "";
            var i =0;
        for(;i