零基础学做网站培训介绍

当前位置:

怎么做弹幕视频网站,弹幕视频网站制作方法

有些学建网站学员咨询怎么制作弹幕视频网站,在建站教程中我们讲了怎么做一个视频网站,对于弹幕视频网站与普通的视频网站的最大区别就是弹幕视频网站可以允许浏览者发“弹幕”,并且弹幕是滚动展示的。如下图:

怎么做弹幕视频网站

好,下面学做网站论坛就介绍一下如何自己制作一个弹幕视频网站,或者将一个普通的视频网站改造成一个弹幕视频网站。(如果你是学做网站论坛VIP学员,在操作过程中有任意不懂的,可以让辅导老师远程指导。)

第一步:下载弹幕视频网站的JQUERY插件。下载链接: https://pan.baidu.com/s/1hHkNOn4qpvzVvq8P0EqYgw 提取码: sk6w

第二步:将下载后的弹幕视频网站的JQUERY插件解压,并将里面的文件夹传到自己网站的空间根目录下;

第三步:使用以下代码引入CSS样式,让自己的弹幕视频网站添加一些播放器样式;


<link href="/danmu/css/scojs.css" rel="stylesheet">
<link href="/danmu/css/colpick.css" rel="stylesheet">
<link href="/danmu/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="/danmu/css/main.css">

第四步:使用以下代码引入JS文件,这些JS文件也是实现弹幕的重要文件;


<script src="/danmu/js/jquery-1.10.2.js"></script>
<script src="/danmu/js/jquery.shcircleloader.js"></script>
<script src="/danmu/js/sco.tooltip.js"></script>
<script src="/danmu/js/colpick.js"></script>
<script src="/danmu/js/jquery.danmu.js"></script>
<script src="/danmu/js/main.js"></script>

第五步:将以下的空的HTML代码替换掉自己原来的视频播放器代码,或者直接放在需要显示弹幕视频的网页中;


<div id="danmup"></div>

第六步:在</body>标签上面放上以下的视频资源代码,来控制播放的视频尺寸,视频地址;


<script>
$("#danmup").DanmuPlayer({
src:"video.mp4",
height: "480px", //区域的高度
width: "800px" //区域的宽度
,urlToGetDanmu:"query.php"
,urlToPostDanmu:"stone.php"
});

</script>

为了方便使用,以下是整个弹幕视频页面的代码:


<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>弹幕视频制作方法-学做网站论坛</title>
<link href="/danmu/css/scojs.css" rel="stylesheet">
<link href="/danmu/css/colpick.css" rel="stylesheet">
<link href="/danmu/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="/danmu/css/main.css">

</head>
<body>
<div>这是由学做网站论坛(https://www.xuewangzhan.net/)整理的弹幕视频制作方法</div>
<div id="danmup">
</div>

<script src="/danmu/js/jquery-1.10.2.js"></script>
<script src="/danmu/js/jquery.shcircleloader.js"></script>
<script src="/danmu/js/sco.tooltip.js"></script>
<script src="/danmu/js/colpick.js"></script>
<script src="/danmu/js/jquery.danmu.js"></script>
<script src="/danmu/js/main.js"></script>

<script>
$("#danmup").DanmuPlayer({
src:"http://www.jplayer.org/video/m4v/Incredibles_Teaser.m4v",
height: "480px", //区域的高度
width: "800px" //区域的宽度
,urlToGetDanmu:"query.php"
,urlToPostDanmu:"stone.php"
});

</script>
</body>
</html>

相关阅读:

制作视频网站怎么配置服务器

视频网站怎么做,视频网站制作方法

怎么将网站评论以弹幕形式滚动展示

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 有些学建网站学员咨询怎么制作弹幕视频网站,在建站教程中我们讲了怎么做一个视频网站,对于弹幕视频网站与普通的视频网站的最大区别就是弹幕视频网站
  • 我们做了网站之后,网站如果制作了评论功能,那么用户评论之后,怎么将评论内容以弹幕形式滚动展示呢?先看下效果:(相关教程:如何给网站添加评论功
  • 网页如何添加视频动画 视频教程 (1100876 次浏览)
    在网站制作过程中,特别是学习视频网站制作教程时,是需要给网站中添加很多的视频的,对于网站如何添加视频有二种方法:一种是添加自己网站的视频,另
  • 从特别基本的什么是网站域名,什么是网站空间讲起,到如何建各种类型的网站。培训课程都是一步步实际操作给大家看,特别的详细,(不像有的教程光讲理
  • 平时我们在调用优酷上面的视频的时候,视频都是有一个广告时间的,是不是看着特别不爽?如何去除优酷视频广告呢?下面汇总了网上流传的几个方法,
  • 纯代码Wordpress前台投稿功能制作方法,很多建网站学员学习了Wordpress教程后,使用Wordpress 程序建了网站。但如果每天都是自己更新文章,感觉会有点
  • 很多网站都有对联广告,当我们打开它的网站的时候,会在屏幕的两边自动的出现二个对联广告,显的很醒目。网站对联广告对于做cpa,cps的朋友有很大
  • 在很多的图片网站上,全使用到3d轮播图效果,可以不断的实现旋转轮播,最大气美观。效果如图:对于这样一种高大上的3D旋转轮播图,做起来并不是想