视频播放器
进入公司一个月拉，总于有机会写个视频播放器了，这次的工作内容主要是给视频播放器加上弹幕功能条，可惜是个小前端，主要是提功能接口和json给后台。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>弹幕</title>
<meta charset="utf-8">
<meta http-equive="X-UA-Compatible" IE="edge">
<link rel="stylesheet" type="text/css" href="TM-CSS.css" charset="utf-8" />
<script src="http://cdn.staticfile.org/jquery/2.1.0/jquery.min.js" type="text/javascript"></script>
</head>
<style>
.demo{
width:680px;
margin:30px auto;
}
.player{margin-bottom: -5px;}
.TM{
position: relative;
background-color: #010101;
height: 35px;
line-height: 34px;
width: 680px;
}
.TM-wrap {
display: inline-block;
position: relative;
height: 20px;
width: 60px;
line-height: 20px;
vertical-align: middle;
background-color: #4a90d1;
border-radius: 6px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
-o-border-radius:6px;
-ms-border-radius:6px;
cursor: pointer;
}
.TM-wrapinner {
background-color: #717171;
border: 1px solid #5c5c5c;
border-radius: 6px;
color: #c4c4c4;
font-size: 14px;
font-weight: bold;
position: absolute;
left:28px;
text-align: center;
width: 30px;
margin-top: -1px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
-o-border-radius:6px;
-ms-border-radius:6px;
}
.TM-send{
background-color: #285783;
color:white;
padding:2px 25px;
border-radius: 2px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-o-border-radius:2px;
-ms-border-radius:2px;
cursor: pointer;
font-size: 14px;
}
.TM-btn{
background-color: #252928;
border:1px solid #3d3b3c;
border-radius: 2px;
color:#a8a7b5;
margin:0 0 0 10px;
padding: 2px 5px;
cursor: pointer;
font-size: 14px;
}
#msg{ width:356px; }
.TM-pop{
position: absolute;
display: inline-block;
left: 40px;
top:-130px;
width: 240px;
height: 125px;
background-color: #ebebeb;
border: 1px solid #c4c4c4;
}
.TM-pop-cont {
padding: 12px;
}
.TM-pop-cont > select {
border: 1px solid #cfcfcf;
width: 150px;
}
#TM-form{
margin: 0 auto;
width: 620px;
}
</style>
<body>
<div class="demo">
<!--播放器-->
<div class="player">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="680" height="400" id="polyvplayer">
<param name="movie" value="http://player.polyv.net/player_polyv_20140829.swf?vid=e8888b74d1637589cca18f108ebaf4d1_e"/>
<param name="allowscriptaccess" value="always"/>
<param name="allowFullScreen" value="true" />
<embed src="http://player.polyv.net/player_polyv_20140829.swf?vid=e8888b74d1637589cca18f108ebaf4d1_e" width="680" height="400" TYPE="application/x-shockwave-flash" allowscriptaccess="always" name="polyvplayer" allowFullScreen="true" />
</embed>
</object>
</div>
<!--弹幕-->
<div class="TM">
<form action="#" method="post" id="TM-form">
<span class="TM-btn">弹幕设置</span>
<div class="TM-wrap">
<span class="TM-wrapinner">|||</span>
</div>
<div class="TM-pop">
<div class="TM-pop-cont">
<label for="fontSize">字号 :</label>
<select id="fontSize" name="fontSize">
<option value="16">16号</option>
<option value="18">18号</option>
<option value="24" selected="selected">24号</option>
<option value="36">36号</option>
<option value="48">48号</option>
</select><br/>
<label for="fontMode">状态 :</label>
<select id="fontMode" name="fontMode">
<option value="top">顶部</option>
<option value="bottom">底部</option>
<option value="roll" selected="selected">滚动</option>
</select><br/>
<label for="fontColor">颜色 :</label>
<select id="fontColor" name="fontColor">
<option value="0xFF0000">红色</option>
<option value="0x0000FF">蓝色</option>
<option value="0x00FF00">绿色</option>
<option value="0xFFFF00">黄色</option>
<option value="0xFFFFFF" selected="selected">白色</option>
<option value="0x000000">黑色</option>
</select>
</div>
</div>
<input type="text" placeholder="可以在这里输入弹幕哦！" id="msg" name="msg"/>
<span class="TM-send">
发 送
</span>
<span class="TM-smile">
</span>
</form>
</div>
</div>
<script src="TMJS.js" type="text/javascript">
/*
* js for TM.html
*/
$(function(){
TM.popTM(); //弹幕设置
TM.getData(); //获取并发送弹幕设置数据
});
var TM = {};
TM.state = 1;//1为弹幕功能开启，0为关闭
/*
*popTM()弹幕设置
*/
TM.popTM = function(){
var designDom = $(".TM-wrap"),
btnDom = $(".TM-wrapinner"),
popDom = $(".TM-pop"),
TMbtnDom = $(".TM-btn");
var Btnleft = "";
popDom.hide();
TMbtnDom.click(function(e){
e.stopPropagation();
popDom.toggle();
});
$(".mask").click(function(){ //遮罩层，点击则隐藏弹幕设置面板
popDom.hide();
});
designDom.click(function(e){
e.stopPropagation(); //阻止事件冒泡
Btnleft = btnDom.position().left;
if(Btnleft==0){ //开启弹幕
j2s_showBarrage();
TM.state = 1; //设置弹幕状态为开启
btnDom.css("left","28px");
$(this).css("background-color","#4a90d1");
}
else{ //关闭弹幕
j2s_hideBarrage();
TM.state = 0; //设置弹幕状态为关闭
$(this).css("background-color","#3d3d3d");
btnDom.css("left","0px");
}
});
}
/*
*getData()
*获取发送弹幕内容
*/
TM.getData =function(){
var TMdata = {}; //TMdata为弹幕数据
/**默认值**/
TMdata.fontSize = $("#fontSize").val();
TMdata.fontMode = $("#fontMode").val();
TMdata.fontColor = $("#fontColor").val();
TMdata.msg = $("#msg").val();
TMdata.vid = $(".TM-send").data("vid");
/**选取的值**/
$("#fontSize").change(function(){
TMdata.fontSize = $(this).val();
});
$("#fontMode").change(function(){
TMdata.fontMode = $(this).val();
});
$("#fontColor").change(function(){
TMdata.fontColor = $(this).val();
});
$("#msg").change(function(){
TMdata.msg = $(this).val();
});
/*为发送按钮绑定回车快捷键*/
$("#TM-form").on("keydown",function(e){
var e = e||event;
var kc = e.which ||e.keyCode;
e.stopPropagation();
if(kc == 13){
TMdata.fontSize = $("#fontSize").val();
TMdata.fontMode = $("#fontMode").val();
TMdata.fontColor = $("#fontColor").val();
TMdata.msg = $("#msg").val();
TMdata.vid = $(".TM-send").data("vid");
$(".TM-send").triggerHandler("click");
e.preventDefault();
}
})
/*发送*/
$(".TM-send").click(function(e){ //点击发送按钮
e.stopPropagation();
var time = getPlayer("polyvplayer").GetCurrentTime();//调用swf播放器函数
var hour = Math.floor(time/3600);
var minute = Math.floor((time%3600)/60);
var second = (time%60)+1;
var timeformatted = hour+":"+minute+":"+second;
var PostData ={
//需要发送的数据
vid:TMdata.vid,
msg:TMdata.msg,
time:timeformatted,
fontSize:TMdata.fontSize,
fontMode:TMdata.fontMode,
fontColor:TMdata.fontColor,
timestamp:timestamp()
};
var dummy = new iframeform(\'http://go.polyv.net/mu/add?\');
dummy.addParameter(\'vid\',PostData.vid); //在form中插入数据
dummy.addParameter(\'msg\',PostData.msg);
dummy.addParameter(\'time\',PostData.time);
dummy.addParameter(\'fontSize\',PostData.fontSize);
dummy.addParameter(\'fontMode\',PostData.fontMode);
dummy.addParameter(\'fontColor\',PostData.fontColor);
dummy.addParameter(\'timestamp\',PostData.timestamp);
dummy.send(); //发送form表单
j2s_reloadBarrageData();
/*
$.post("http://go.polyv.net/mu/add?",PostData,function(){
$("#msg").val("");
j2s_reloadBarrageData(); //存在跨域的问题
}); */
});
}
function iframeform(url) //创建form和iframe，用于解决js跨域问题
{
var object = this;
object.time = new Date().getTime();
object.addParameter = function(parameter,value)
{
$("<input type=\'hidden\' />")
.attr("name", parameter)
.attr("value", value)
.appendTo(object.form);
};
object.form = $(\'<form action="\'+url+\'" target="iframe\'+object.time+\'" style="display:none;" method="post" id="form\'+object.time+\'" name="form\'+object.time+\'"></form>\');
object.send = function()
{
var iframe = $(\'<iframe data-time="\'+object.time+\'" style="display:none;" id="iframe\'+object.time+\'" name="iframe\'+object.time+\'"></iframe>\');
$( "body" ).append(iframe);
$( "body" ).append(object.form);
object.form.submit();
iframe.load(function(){
$(\'#form\'+$(this).data(\'time\')).remove();
$(this).remove();
j2s_reloadBarrageData();
$("#msg").val("");
});
}
}
/****************定义*************/
function timestamp(){
var timestamp = Date.parse(new Date());
return timestamp;
}
function getPlayer(movieName) {
if (navigator.appName.indexOf("Microsoft") != -1) {
return $("#"+movieName)[0];
} else {
return document[movieName];
}
}
function s2j_callOnBarrageUrl()
{
var vid =$(".TM-send").data("vid");
return "http://go.polyv.net/mu/"+vid+".json";
}
function j2s_showBarrage()
{
var player = thisMovie("polyvplayer");
if(player != undefined && player.j2s_showBarrage!= undefined)
{
player.j2s_showBarrage();
}
}
function j2s_hideBarrage()
{
var player = thisMovie("polyvplayer");
if(player != undefined && player.j2s_hideBarrage!= undefined)
{
player.j2s_hideBarrage();
}
}
function j2s_reloadBarrageData()
{
var player = thisMovie("polyvplayer");
if(player != undefined && player.j2s_reloadBarrageData!= undefined)
{
player.j2s_reloadBarrageData();
}
}
function j2s_addBarrageMessage()
{
var player = thisMovie("polyvplayer");
if(player != undefined && player.j2s_addBarrageMessage!= undefined)
{
player.j2s_addBarrageMessage(\'[{"msg":"登登登登dedede!!!!","time":"0:0:16","fontSize":"big","fontColor":"0xffffff","fontMode":"roll"},{"msg":"等等等的呢嗯的呢!!!!","time":"0:0:16","fontSize":"big","fontColor":"0xffffff","fontMode":"roll"},{"msg":"苏打水苏打水!!!!","time":"0:0:16","fontSize":"big","fontColor":"0xffffff","fontMode":"roll"}]\');
}
}
function thisMovie(movieName) {
if (navigator.appName.indexOf("Microsoft") != -1) {
var reObj=window[movieName];
//ie10下面是collection集合
try
{
if(reObj.length>0)
{
return reObj[0];
}
}catch(e)
{
}
return ;
}
else {
return document[movieName];
}
}
/*****************************/
</script>
</body>
</html>
后台：
1<?php
$file = "/tmp/danmu.json";
//$body = @file_get_contents($file);
$msg = $_POST["msg"];
$time = $_POST["time"];
$fontSize = $_POST["fontSize"];
$fontMode = $_POST["fontMode"];
$fontColor = $_POST["fontColor"];
$timestamp = $_POST["timestamp"];
if($msg){
$line = $msg."##".$time."##".$fontSize."##".$fontColor."##".$fontMode."##".$timestamp."\n";
file_put_contents($file,$line,FILE_APPEND)
}
?>
难点所在：由于弹幕功能条以后有可能放进播放盒里面，而不是简单嵌入到html里面，因此尽量少使用图片，所以按钮是css绘制的；
获取弹幕设置的数据。
版权声明：本文为hanbingljw原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。