如何使用video.js进行小型视频网站的开发

写在前面
首页大致设计
- 通过JavaScript与php与数据库交互
- 通过JavaScript生成视频展示模块
视频播放页面设计
- 通过js和php与数据库交互
- 通过js生成视频剧集列表
- 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<list.length;i++){str = str+'<li class="video-list"><a href="video.html?id='+list[i].id+'"><img src="../qunzhi/image/video/'+list[i].imgpath+'" class="video-img" alt=""><p class="video-name">'+list[i].name+'</p></a></li>';}$('#xxx').html(str);

这里的list中，就是从数据库中得到的数据，通过<li>标签来进行展示。注意$(’#xxx’).html(str);中，需要找到对应的设定的id。针对每一个小模块，需要设定一个超链接：href=“video.html?id=’+list[i].id+’”，这里设定的id保证了后续的跳转（期中添加的id为字符串拼接）。同时这里的每一个部分都需要设定样式。
html代码如下：

<div><ul class="video-lists" id='xxx'></ul>
</div>

视频播放页面设计

每一个视频可能仅有一集，也可能有很多集，所以视频播放的页面有videojs的播放器，还有剧集的列表。列表的每一项都有一个小的视频封面图，视频的标题。

通过js和php与数据库交互

在跳转之后，读取url中传来的id，并传给php，通过这个id从数据库读取详细的视频剧集。

 var url = location.search; //获取url中"?"符后的字串var theRequest = new Object();if (url.indexOf("?") != -1) {var str = url.substr(1);strs = str.split("&");for(var i = 0; i < strs.length; i ++) {theRequest[strs[i].split("=")[0]]=decodeURI(strs[i].split("=")[1]);}}var httpRequest = new XMLHttpRequest();//第一步：创建需要的对象httpRequest.open('POST', 'http://8.131.81.241/qunzhi/video.php', true); //第二步：打开连接httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");//设置请求头 注：post方式必须设置请求头（在建立连接后设置请求头）httpRequest.send('id='+theRequest['id']);//发送请求 将请求头体写在send中

此处为php头部需要的代码，其他与上文一致。需要确认数据库中的数据格式。

$id=$_POST['id'];

通过js生成视频剧集列表

与上文的方法一致，但是此处不需要进行连接，因为在网站中内嵌了vediojs，不需要通过链接来进行页面跳转刷新来改变视频。但在这里的设计是对于每一个<li>标签的id进行设置，以方便在之后的切换中进行选择。

         var j=0;var st = "";for(;j<list.length;j++){  //js循环产生<li>标签，id为视频序号st = st+ '<li class="video-list" id="'+j+'" ><img src="../qunzhi/image/video/'+list[j].imgpath+'" class="video-img" alt=""><p class="video-name">'+list[j].title+'</p></a></li>';  }$('#video-list1').html(st);//在video-list1生成列表

videojs播放器的初始化

这个部分可以参照文章：如何使用videojs播放器
在这里主要阐述如何初始化player的视频源，新建数组以储存视频源数据，在完成数据的更新之后，调用初始化函数。

var j=0;var st = "";for(;j<list.length;j++){  var item = {src : list[j].videopath,type : list[j].type,poster : list[j].imgpath,title : list[j].title}srclist[j] = item;//更新单个视频源console.log(srclist);//反馈更新完的视频源//初始化playerinitailPlayer();

initailPlayer()中的部分代码：
（注释的为原本的数据格式）

sources: srclist// sources:[ // 视频源//     {//         src: 'xxx.mp4',//         type: 'video/mp4',//         poster: 'xxx.png',//         title: 'xxx'//     }// ]

关于每个剧集选中状态的改变

首先我们需要归纳改变状态的情况：
1.单击列表中的某个剧集
2.视频结束后的自动切换
3.主动点击切换下一集
对于第一种情况，对<li>添加click事件。$("#"+j)这里代表的就是<li>的id，由于之前先进行了设置，所以可以通过循环进行方法的添加。针对单击的<li>进行样式的添加，对于其他的进行样式的消除，以达到改变的目的。

 for(j=0;j<list.length;j++){$("#"+j).click(function(){//设置选中状态$(this).siblings('li').removeClass('selected');// 删除其他兄弟元素的样式$(this).addClass('selected'); // 添加当前元素的样式})}

对于第二种和第三种情况，使用监听器与监听器函数来完成切换。
首先是监听器代码，写在初始化之后：

 player.on(player,'ended',ended);player.controlBar.PlayNext.on(player.controlBar.PlayNext,'click',playnext);player.controlBar.AutoPlayNext.on(player.controlBar.AutoPlayNext,'click',changeauto);

下面是监听器函数：

var isauto=true;//记录是否自动播放
var index = 0;//来确定当前播放的视频
/*
自动播放的监听器函数
视频播放结束，若处于自动播放状态则改变index为下一视频
*/
function ended(){if(isauto){//$("#"+index).trigger('click');$("#"+index).siblings().removeClass('selected');// 删除其他兄弟元素的样式$("#"+index).addClass('selected'); // 添加当前元素的样式
}console.log('ended: '+index);//反馈变更
}
/*
播放下一集的监听器函数
用户主动切换下一集则改变当前播放的index值，并且改变选择列表中的选择情况
*/
function playnext(){//$("#"+index).trigger('click');//模拟点击事件，启用后每一次使用播放下一集按钮都会切换播放源$("#"+index).siblings().removeClass('selected');// 删除其他兄弟元素的样式$("#"+index).addClass('selected'); // 添加当前元素的样式console.log('playnext: '+index);//反馈变更
}/*
切换自动播放按钮的监听器函数
每一次切换状态，isauto的值随之改变
*/
function changeauto(){isauto=!isauto;console.log('new isauto: '+isauto);//反馈改变
}

单击剧集后进行的切换

笔者在这里遇到了一点困难，因为难以取得<li>的id，试了很多方法都不行。后来采用设置onclick的方法来达成，在onclick中调用改变剧集的函数。

var li=document.getElementById("video-list1").getElementsByTagName("li");//获取video-list1中的全部<li>if(li!=null){console.log("li:"+li.length);}for(let i=0;i<li.length;i++){li[i].onclick=function(){//alert(li[i].id);changevideo(i);//通过i改变片源}}

此处为改变片源的函数：

 /*
此函数用来更改player的片源，在点击序列中某一集的时候触发，将该集置为播放列表头部，总循环顺序不变
传入参数a为选中的集数
*/
function changevideo(a){var sss=new Array;
var j;
for(j=0;j<list.length;j++){var item = {src : list[a].videopath,type : list[a].type,poster : list[a].imgpath,title : list[a].title}sss[j]=item;//更新新的片源队列a++;if(a==list.length){//如果到队列末尾，将a置零，从头继续a=0;}
}
console.log(sss);//显示更新后的序列
//更新
player.options_.sources=sss;
player.pause();
player.src(sss[0]);
player.TitleBar.updateTextContent(sss[0].title);
player.load();
player.play();
}

写在最后

感谢您的观看，欢迎在评论区进行探讨。css样式并未给出，可以根据自己的喜好进行设置。

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

小型教育网站的开发与建设-总体设计（三）
博主简介:原互联网大厂tencent员工,网安巨头Venustech员工,阿里云开发社区专家博主,微信公众号java基础笔记优质创作者,csdn优质创作博主,创业者,知识共享者,欢迎关注,点赞,收藏. ...
小型教育网站的开发与建设-系统设计（四）
一.本科计算机专业毕业设计论文写作指南系列文章本科计算机专业毕业设计论文写作指南小型教育网站的开发与建设-开篇(一) 小型教育网站的开发与建设-前言与需求分析(二) 小型教育网站的开发与建设-总体 ...
小型教育网站的开发与建设-开篇（一）
一.本科计算机专业毕业设计论文写作指南系列文章本科计算机专业毕业设计论文写作指南小型教育网站的开发与建设-开篇(一) 小型教育网站的开发与建设-前言与需求分析(二) 小型教育网站的开发与建设-总体 ...
基于springboot的短视频网站的开发与设计
通知:代本科论文"润色"<基于视频监控的智慧消防系统>,可私聊. [注]该项目<基于springboot的短视频网站的开发与设计>为本人毕业设计.使用的开发 ...
小型教育网站的开发与建设-尾篇（五）
一.本科计算机专业毕业设计论文写作指南系列文章本科计算机专业毕业设计论文写作指南小型教育网站的开发与建设-开篇(一) 小型教育网站的开发与建设-前言与需求分析(二) 小型教育网站的开发与建设-总体 ...
影视网站设计报告代码MySQL_基于PHP的视频网站的设计与实现(MySQL)(含录像)
基于PHP的视频网站的设计与实现(MySQL)(含录像)(毕业论文10000字,程序代码,MySQL数据库) 本研究的视频网站基于当前较为流行的B/S结构,采用PHP技术和MYSQL数据库进行开发设计 ...
[附源码]JAVA+ssm视频网站（程序+Lw)
项目运行环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...
jsp在线视频网站系统的设计与实现
在线视频网站系统的设计与实现摘要当前,国内视频行业的规模呈逐年上升,在线视频.评论都在逐渐增加,视频行业管理的压力日益提升.目前,仍然有较多视频行业采用传统的人工.单机方式进行管理,所产生的管理 ...
【网站】如何做一个自己的视频网站
很喜欢一个小姐姐的影视作品,但是网上资源少的可怜,所以想去做一个视频网站,满足大家的观看需求.趁着天气凉快,开始行动! 1.前端网上查到很多开源的视频插件,最后我用到videojs这一款开源的视频播 ...

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