Laravel框架实战-在线教育平台(4)
一、直播介绍【★★★】
1、术语介绍
直播:实时播放某个画面(国内最大的有yy、战旗、斗鱼tv、龙珠等)
点播:类似于重播,编辑好的视频,观众可以重任意时间段观看(优酷、土豆、爱奇艺等)
直播流:也可以称之为数据流,就是直播中的视频画面数据
七牛:目前比较大的云数据服务公司
直播和点播实现原理
1)概括
步骤1:采集视频画面数据,通过摄像机、手机、录屏软件等设备。
步骤2:用户打开视频播放器拉去视频中的数据播放
思考:直播和点播步骤1和步骤2的区别
回答:直播必须实时采集视频画面数据、点播是提前录制
直播流程详细说明
- 直播推流(push):指视频画面数据,从采集点到服务器的过程。
- 直播拉流(pull):指视频画面数据,从服务器到观众的过程。
直播初体验
1、申请直播云服务步骤
1)注册并登陆七牛云
- 官网网址:https://www.qiniu.com/
- 步骤
2)申请直播云服务,填写如下信息
3)填写完成后,要等待审核(目前:1~3个工作日)
4)审核通过后,重新选择‘立即添加’直播云服务
直播云服务管理
1)介绍
直播空间(1) 对应 ‘直播流’(n)
‘直播流’(1) 对应 直播项目(1)
2)直播空间管理
- 创建空间
域名解析操作
设置推流地址
设置拉流地址
- 删除空间(慎用)
3)直播空间-直播流管理
初体验(一套直播实现流程)
【推流】使用OBS软件获将幕、摄像头等数据推送到七牛云
- 步骤1:打开OBS软件官网:http://www.obsapp.net
- 步骤2:下载并安装(注:安装就是傻瓜式下一步即可)
- 步骤3:设置使用获取屏幕数据或者摄像头数据
- 步骤4:继续设置,将通过OBS软件获取的屏幕或摄像头等数据
内容推送到七牛云
- 获取推送地址
2)打开软件设置推送地址
rtmp://pili-publish.php12.sk-school.com/201801140001/test2?e=1515897779&token=RlWO59USAL86QtQ4LhYFWsAGjLZEYbgD5H9_Fhob:8_jLY7p5M34epelW0oKP66WBZ40=
红色填入:URL
绿色填入:流秘钥
多学一招:OBS就是一个软件,作用就是推送直播所需画面数据)
【拉流1】flash方式播放【直播】
<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>ckplayer简单调用演示</title>
</head>
<body>
<div id=”a1″></div>
<script type=”text/javascript” src=”ckplayer/ckplayer.js” charset=”utf-8″></script>
<script type=”text/javascript”>
var flashvars={
f:’rtmp://pili-live-rtmp.php12.sk-school.com/201801140001/test2?sign=930b44c2efd1e384e3dfc8a6aee6035c&t=5a5aba5d‘,
c:0,
b:1,
i:’http://www.ckplayer.com/static/images/cqdw.jpg’
};
var video=[‘http://img.ksbbs.com/asset/Mon_1605/0ec8cc80112a2d6.mp4->video/mp4’];
CKobject.embed(‘ckplayer/ckplayer.swf’,’a1′,’ckplayer_a1′,’600′,’400′,false,flashvars,video)
function closelights(){//关灯
alert(‘ 本演示不支持开关灯’);
}
function openlights(){//开灯
alert(‘ 本演示不支持开关灯’);
}
</script>
</body>
</html>
【拉流2】html5方式播放【√】
仓库地址:https://github.com/huangyaoxin/hLive
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>fz-live</title>
<link href=”./css/video.css” rel=”stylesheet”>
<script src=”./js/video.js”></script>
<script src=”./js/videojs-live.js”></script>
</head>
<body>
<video id=”my_video_1″ class=”video-js vjs-default-skin” controls preload=”auto” width=”1000″ height=”500″
data-setup='{}’>
<source src=”http://pili-live-hls.php12.sk-school.com/201801140001/test2.m3u8?sign=2f34f36a8c32f69a87559da2dfd1e3e4&t=5a5ac230″ type=”application/x-mpegURL”>
</video>
<script>
</script>
</body>
</html>
︴扩展
手机APP开发直播功能相关文档
三、直播流管理(在线教育后台)
1、准备
1)直播流表
后台直播流表
表名 |
stream |
|||||
序号 |
字段 |
类型 |
说明 |
空 |
默认值 |
主键 |
1 |
id |
int |
自增主键 |
N |
N/A |
是 |
2 |
stream _name |
varchar(200) |
直播流名称 |
N |
||
3 |
state |
tinyint |
直播流状态:1=正常,2=永久禁播,3=限时禁播 |
N |
正常 |
|
4 |
created_at |
int |
创建于 |
N |
0 |
|
5 |
update_at |
int |
更新于 |
N |
0 |
步骤1:创建迁移文件并书写
步骤2:执行迁移文件
Schema::create(‘stream’, function (Blueprint $table) {
$table->increments(‘id’);
$table->string(‘stream_name’)->comment(‘直播流名称’);
$table->unsignedTinyInteger(‘state’)->default(1)->comment(‘直播流状态:1-正常,2-永久禁播,3-限时禁播’);
$table->unsignedInteger(‘created_at’)->default(0)->comment(‘创建于’);
$table->unsignedInteger(‘updated_at’)->default(0)->comment(‘创建于’);
});
模型
<?php
namespace App\Http\Model;
use Illuminate\Database\Eloquent\Model;
class Stream extends Model
{
/**
* 声明表名(注:laravel会自动加s所以自己声明覆盖)
* @var string
*/
protected $table = ‘stream’;
/**
* Unix时间戳形式填充创建于和更新于(注:模型默认托管时间但是是datetime类型)
* @var string
*/
protected $dateFormat = ‘U’;
/**
* 声明可批量设置的属性(注:当使用create静态方式时)
* @var array
*/
protected $fillable = [‘stream_name’, ‘state’];
}
更改后台菜单
2、列表功能
1)加载视图
步骤1:路由
步骤2:创建控制器方法并加载视图
步骤3:创建视图
2)数据处理
- 步骤1:控制器方法调用模型查询所有数据并分页,传递给视图
<?php
namespace App\Http\Controllers\Admin;
use App\Http\Model\Stream;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
class StreamController extends Controller
{
//列表
public function index()
{
//1.分页获取数据
$streams = Stream::orderBy(‘id’, ‘desc’)->paginate(8);
//2.加载视图并传递数据
return view(‘admin.stream.index’, compact(‘streams’));
}
}
- 步骤2:视图循环显示即可
<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”renderer” content=”webkit|ie-comp|ie-stand”>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<meta name=”viewport” content=”width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no” />
<meta http-equiv=”Cache-Control” content=”no-siteapp” />
<!–[if lt IE 9]>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/html5shiv.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/respond.min.js”></script>
<![endif]–>
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/static’) }}/h-ui/css/H-ui.min.css” />
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/static’) }}/h-ui.admin/css/H-ui.admin.css” />
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/lib’) }}/Hui-iconfont/1.0.8/iconfont.css” />
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/static’) }}/h-ui.admin/skin/default/skin.css” id=”skin” />
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/static’) }}/h-ui.admin/css/style.css” />
<!–[if IE 6]>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/DD_belatedPNG_0.0.8a-min.js” ></script>
<script>DD_belatedPNG.fix(‘*’);</script>
<![endif]–>
<title>直播流管理</title>
</head>
<body>
<nav class=”breadcrumb”><i class=”Hui-iconfont”></i> 首页 <span class=”c-gray en”>></span> 管理员管理 <span class=”c-gray en”>></span> 直播流管理 <a class=”btn btn-success radius r” style=”line-height:1.6em;margin-top:3px” href=”javascript:location.replace(location.href);” title=”刷新” ><i class=”Hui-iconfont”></i></a></nav>
<div class=”page-container”>
<div class=”text-c”>
<form class=”Huiform” method=”post” action=”” target=”_self”>
<input type=”text” class=”input-text” style=”width:250px” placeholder=”直播流名称” id=”” name=””>
<button type=”submit” class=”btn btn-success” id=”” name=””><i class=”Hui-iconfont”></i> 搜直播流节点</button>
</form>
</div>
<div class=”cl pd-5 bg-1 bk-gray mt-20″>
<span class=”l”>
<a href=”javascript:;” onclick=”datadel()” class=”btn btn-danger radius”>
<i class=”Hui-iconfont”></i> 批量删除
</a>
<a href=”javascript:;” onclick=”admin_permission_add(‘添加直播流节点’,'{{ url(‘admin/stream/add’) }}’,”,’310′)” class=”btn btn-primary radius”>
<i class=”Hui-iconfont”></i> 添加直播流节点
</a>
</span>
<span class=”r”>共有数据:<strong>54</strong> 条</span>
</div>
<table class=”table table-border table-bordered table-bg”>
<thead>
<tr>
<th scope=”col” colspan=”6″>直播流节点</th>
</tr>
<tr class=”text-c”>
<th width=”25″><input type=”checkbox” name=”” value=””></th>
<th width=”40″>ID</th>
<th width=”200″>数据流名称</th>
<th>状态</th>
<th>创建于</th>
<th width=”100″>操作</th>
</tr>
</thead>
<tbody>
@foreach ($streams as $stream)
<tr class=”text-c”>
<td><input type=”checkbox” value=”1″ name=””></td>
<td>{{ $stream->id }}</td>
<td>{{ $stream->stream_name }}</td>
<td>
@if($stream->state == 1)
正常
@elseif($stream->state == 2)
永久禁用
@else
限时禁用
@endif
</td>
<td>{{ $stream->created_at }}</td>
<td><a title=”编辑” href=”javascript:;” onclick=”admin_permission_edit(‘角色编辑’,’admin-permission-add.html’,’1′,”,’310′)” class=”ml-5″ style=”text-decoration:none”><i class=”Hui-iconfont”></i></a> <a title=”删除” href=”javascript:;” onclick=”admin_permission_del(this,’1′)” class=”ml-5″ style=”text-decoration:none”><i class=”Hui-iconfont”></i></a></td>
</tr>
@endforeach
</tbody>
</table>
</div>
<!–_footer 作为公共模版分离出去–>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/jquery/1.9.1/jquery.min.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/layer/2.4/layer.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/static’) }}/h-ui/js/H-ui.min.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/static’) }}/h-ui.admin/js/H-ui.admin.js”></script> <!–/_footer 作为公共模版分离出去–>
<!–请在下方写此页面业务相关的脚本–>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/datatables/1.10.0/jquery.dataTables.min.js”></script>
<script type=”text/javascript”>
/*
参数解释:
title 标题
url 请求的url
id 需要操作的数据id
w 弹出层宽度(缺省调默认值)
h 弹出层高度(缺省调默认值)
*/
/*管理员-直播流-添加*/
function admin_permission_add(title,url,w,h){
layer_show(title,url,w,h);
}
/*管理员-直播流-编辑*/
function admin_permission_edit(title,url,id,w,h){
layer_show(title,url,w,h);
}
/*管理员-直播流-删除*/
function admin_permission_del(obj,id){
layer.confirm(‘确认要删除吗?’,function(index){
$.ajax({
type: ‘POST’,
url: ”,
dataType: ‘json’,
success: function(data){
$(obj).parents(“tr”).remove();
layer.msg(‘已删除!’,{icon:1,time:1000});
},
error:function(data) {
console.log(data.msg);
},
});
});
}
</script>
</body>
</html>
添加功能
1)加载视图
步骤1:路由
步骤2:设置控制器方法并加载视图
步骤3:创建视图
2)数据处理
步骤1:更改路由
步骤2:更改视图
<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”renderer” content=”webkit|ie-comp|ie-stand”>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<meta name=”viewport” content=”width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no” />
<meta http-equiv=”Cache-Control” content=”no-siteapp” />
<!–[if lt IE 9]>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/html5shiv.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/respond.min.js”></script>
<![endif]–>
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/static’) }}/h-ui/css/H-ui.min.css” />
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/static’) }}/h-ui.admin/css/H-ui.admin.css” />
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/lib’) }}/Hui-iconfont/1.0.8/iconfont.css” />
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/static’) }}/h-ui.admin/skin/default/skin.css” id=”skin” />
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/static’) }}/h-ui.admin/css/style.css” />
<!–[if IE 6]>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/DD_belatedPNG_0.0.8a-min.js” ></script>
<script>DD_belatedPNG.fix(‘*’);</script>
<![endif]–>
<title>添加管理员 – 管理员管理 – H-ui.admin v3.1</title>
<meta name=”keywords” content=”H-ui.admin v3.1,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载”>
<meta name=”description” content=”H-ui.admin v3.1,是一款由国人开发的轻量级扁平化网站后台模板,完全免费开源的网站后台管理系统模版,适合中小型CMS后台系统。”>
</head>
<body>
<article class=”page-container”>
<form class=”form form-horizontal” id=”form-admin-add”>
{{ csrf_field() }}
<div class=”row cl”>
<label class=”form-label col-xs-4 col-sm-3″><span class=”c-red”>*</span>数据流名称</label>
<div class=”formControls col-xs-8 col-sm-9″>
<input type=”text” class=”input-text” value=”” placeholder=”” id=”stream_name” name=”stream_name”>
</div>
</div>
<div class=”row cl”>
<label class=”form-label col-xs-4 col-sm-3″><span class=”c-red”>*</span>直播流状态</label>
<div class=”formControls col-xs-8 col-sm-9 skin-minimal”>
<div class=”radio-box”>
<input type=”radio” name=”state” id=”sex-1″ value=”1″ checked>
<label for=”sex-1″>正常</label>
</div>
<div class=”radio-box”>
<input type=”radio” name=”state” id=”sex-2″ value=”2″ name=”sex”>
<label for=”sex-2″>永久禁播</label>
</div>
<div class=”radio-box”>
<input type=”radio” name=”state” id=”sex-2″ value=”3″ name=”sex”>
<label for=”sex-2″>限时禁播</label>
</div>
</div>
</div>
<div class=”row cl”>
<div class=”col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3″>
<input class=”btn btn-primary radius” type=”submit” value=” 提交 ”>
</div>
</div>
</form>
</article>
<!–_footer 作为公共模版分离出去–>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/jquery/1.9.1/jquery.min.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/layer/2.4/layer.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/static’) }}/h-ui/js/H-ui.min.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/static’) }}/h-ui.admin/js/H-ui.admin.js”></script> <!–/_footer 作为公共模版分离出去–>
<!–请在下方写此页面业务相关的脚本–>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/jquery.validation/1.14.0/jquery.validate.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/jquery.validation/1.14.0/validate-methods.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/jquery.validation/1.14.0/messages_zh.js”></script>
<script type=”text/javascript”>
$(function(){
$(‘.skin-minimal input’).iCheck({
checkboxClass: ‘icheckbox-blue’,
radioClass: ‘iradio-blue’,
increaseArea: ‘20%’
});
$(“#form-admin-add”).validate({
rules:{
stream_name:{
required:true,
minlength:4,
maxlength:16
},
},
onkeyup:false,
focusCleanup:true,
success:”valid”,
submitHandler:function(form){
$(form).ajaxSubmit({
type: ‘post’,
url: “{{ url(‘admin/stream/add’) }}” ,
success: function(data){
window.parent.location.reload(); //刷新父页面
parent.layer.msg(‘添加成功!’,{icon:1,time:1000});
var index = parent.layer.getFrameIndex(window.name);
parent.$(‘.btn-refresh’).click();
parent.layer.close(index);
// window.location.href = location.href;
// alert(location.href);
},
error: function(XmlHttpRequest, textStatus, errorThrown){
layer.msg(‘error!’,{icon:1,time:1000});
}
});
}
});
});
</script>
<!–/请在上方写此页面业务相关的脚本–>
</body>
</html>
步骤3:更改控制器
<?php
namespace App\Http\Controllers\Admin;
use App\Http\Model\Stream;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
class StreamController extends Controller
{
//列表
public function index()
{
//1.分页获取数据
$streams = Stream::orderBy(‘id’, ‘desc’)->paginate(8);
//2.加载视图并传递数据
return view(‘admin.stream.index’, compact(‘streams’));
}
//添加
public function add(Request $request)
{
//1.判断HTTP请求类型
if ($request->ismethod(‘post’)) {
//2.接受数据
$postData = $request->only([‘stream_name’,’state’]);
//3.通过模型添加数据
$rs = Stream::create($postData);
//4.判断
echo $rs ? 1 : 0;
} else {
//2.加载视图并传递数据
return view(‘admin.stream.add’);
}
}
}
同步七牛云创建直播流
1)接口文档说明
接口说明:https://developer.qiniu.com/pili/api/2515/create-a-flow
安装配置工具库(七牛SDK、发送请求工具库)
- 七牛SDK(zgldh/qiniu-laravel-storage)
#【安装并配置】
- 发送请求工具库(guzzlehttp/guzzle):是更加强大的curl
#【安装】composer require guzzlehttp/guzzle
#【基本语法】
$client = new \Guzzle\Client();
$client->request(方式,host,[headers body]);
使用
<?php
namespace App\Http\Controllers\Admin;
use App\Http\Model\Stream;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
class StreamController extends Controller
{
//列表
public function index()
{
//1.分页获取数据
$streams = Stream::orderBy(‘id’, ‘desc’)->paginate(8);
//2.加载视图并传递数据
return view(‘admin.stream.index’, compact(‘streams’));
}
//添加
public function add(Request $request)
{
//1.判断HTTP请求类型
if ($request->ismethod(‘post’)) {
//直播流名称过滤:必须唯一
//2.接受数据
$postData = $request->only([‘stream_name’,’state’]);
//3.通过模型添加数据
$rs = Stream::create($postData);
//4.判断
if ($rs) {
//成功同步创建直播流
$method = ‘POST’; //HTTP请求类型
$space = ‘201801140002’; //空间名称(注:该空间必须存在)
$path = ‘/v2/hubs/’.$space.’/streams’; //请求接口地址
$host = ‘pili.qiniuapi.com’; //接口请求域名
$contentType = ‘application/json’;
$body = json_encode([ //将请求体数据转化为json格式
‘key’=>$request->input(‘stream_name’)
]);
//根据请求包,我们要制作鉴权信息(用于验证请求包在传输中是否被篡改);
//Authorization: <QiniuToken>
//生成签名字符串;
$data = “$method $path\nHost: $host\nContent-Type: $contentType\n\n$body”;
$ak = config(‘filesystems.disks.qiniu.access_key’); //通过config函数获取配置文件信息
$sk = config(‘filesystems.disks.qiniu.secret_key’);
$qiniu = new \Qiniu\Auth($ak,$sk);
$token = “Qiniu “.$qiniu->sign($data); //根据HTTP请求鉴权接口生成秘钥
//利用GuzzleHttp发送请求表
$cli = new \GuzzleHttp\Client();
$res = $cli->request($method, $host.$path, [
‘headers’ => [
‘Authorization’ => $token,
‘Content-Type’ => $contentType,
‘Accept-Encoding’ => ‘gzip’,
‘Content-Length’ => strlen($body),
‘User-Agent’ => ‘pili-sdk-go/v2 go1.6 darwin/amd64’,
],
‘body’=>$body,
]);
//var_dump($res);die;
}
echo $rs ? 1 : 0;
} else {
//2.加载视图并传递数据
return view(‘admin.stream.add’);
}
}
}
四、直播课程管理(在线教育后台)
1、准备
1)直播课程流表
后台直播课程表
表名 |
live |
|||||
序号 |
字段 |
类型 |
说明 |
空 |
默认值 |
主键 |
1 |
id |
int |
自增主键 |
N |
N/A |
是 |
2 |
live_name |
varchar(200) |
直播课程名称 |
Y |
||
3 |
stream_id |
int |
所属直播流 |
Y |
||
4 |
img |
varchar(255) |
封面 |
N |
||
5 |
start_time |
int |
直播开始时间 |
Y |
||
6 |
end_time |
int |
直播结束时间 |
Y |
||
7 |
created_at |
int |
创建于 |
N |
0 |
|
8 |
update_at |
int |
更新于 |
N |
0 |
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateLiveTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create(‘live’, function (Blueprint $table) {
$table->increments(‘id’);
$table->string(‘live_name’, 200)->comment(‘直播课程名称’);
$table->unsignedInteger(‘stream_id’)->comment(‘所属直播流’);
$table->string(‘img’)->default(”)->comment(‘封面’);
$table->unsignedInteger(‘start_time’)->default(0)->comment(‘直播开始时间’);
$table->unsignedInteger(‘end_time’)->default(0)->comment(‘直播结束时间’);
$table->unsignedInteger(‘created_at’)->default(0)->comment(‘创建于’);
$table->unsignedInteger(‘updated_at’)->default(0)->comment(‘更新于’);
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists(‘live’);
}
}
2)模型
<?php
namespace App\Http\Model;
use Illuminate\Database\Eloquent\Model;
class Live extends Model
{
/**
* 声明表名(注:laravel会自动加s所以自己声明覆盖)
* @var string
*/
protected $table = ‘live’;
/**
* Unix时间戳形式填充创建于和更新于(注:模型默认托管时间但是是datetime类型)
* @var string
*/
protected $dateFormat = ‘U’;
/**
* 声明可批量设置的属性(注:当使用create静态方式时)
* @var array
*/
protected $fillable = [‘live_name’, ‘stream_id’, ‘img’, ‘start_time’, ‘end_time’];
}
2、列表功能
步骤1:路由
步骤2:创建控制器方法,分页获取数据,加载视图并传递数据
<?php
namespace App\Http\Controllers\Admin;
use App\Http\Model\Live;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
class LiveController extends Controller
{
//列表
public function index()
{
//1.分页获取数据
$lives = Live::orderBy(‘id’, ‘desc’)->paginate(8);
//2.加载视图并传递数据
return view(‘admin.stream.index’, compact(‘lives’));
}
}
步骤3:创建视图
<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”renderer” content=”webkit|ie-comp|ie-stand”>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<meta name=”viewport” content=”width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no” />
<meta http-equiv=”Cache-Control” content=”no-siteapp” />
<!–[if lt IE 9]>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/html5shiv.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/respond.min.js”></script>
<![endif]–>
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/static’) }}/h-ui/css/H-ui.min.css” />
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/static’) }}/h-ui.admin/css/H-ui.admin.css” />
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/lib’) }}/Hui-iconfont/1.0.8/iconfont.css” />
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/static’) }}/h-ui.admin/skin/default/skin.css” id=”skin” />
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/static’) }}/h-ui.admin/css/style.css” />
<!–[if IE 6]>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/DD_belatedPNG_0.0.8a-min.js” ></script>
<script>DD_belatedPNG.fix(‘*’);</script>
<![endif]–>
<title>直播课程管理</title>
</head>
<body>
<nav class=”breadcrumb”><i class=”Hui-iconfont”></i> 首页 <span class=”c-gray en”>></span> 管理员管理 <span class=”c-gray en”>></span> 直播课程管理 <a class=”btn btn-success radius r” style=”line-height:1.6em;margin-top:3px” href=”javascript:location.replace(location.href);” title=”刷新” ><i class=”Hui-iconfont”></i></a></nav>
<div class=”page-container”>
<div class=”text-c”>
<form class=”Huiform” method=”post” action=”” target=”_self”>
<input type=”text” class=”input-text” style=”width:250px” placeholder=”直播课程名称” id=”” name=””>
<button type=”submit” class=”btn btn-success” id=”” name=””><i class=”Hui-iconfont”></i> 搜直播课程节点</button>
</form>
</div>
<div class=”cl pd-5 bg-1 bk-gray mt-20″>
<span class=”l”>
<a href=”javascript:;” onclick=”datadel()” class=”btn btn-danger radius”>
<i class=”Hui-iconfont”></i> 批量删除
</a>
<a href=”javascript:;” onclick=”admin_permission_add(‘添加直播课程节点’,'{{ url(‘admin/stream/add’) }}’,”,’310′)” class=”btn btn-primary radius”>
<i class=”Hui-iconfont”></i> 添加直播课程节点
</a>
</span>
<span class=”r”>共有数据:<strong>54</strong> 条</span>
</div>
<table class=”table table-border table-bordered table-bg”>
<thead>
<tr>
<th scope=”col” colspan=”6″>直播课程节点</th>
</tr>
<tr class=”text-c”>
<th width=”25″><input type=”checkbox” name=”” value=””></th>
<th width=”40″>ID</th>
<th width=”40″>封面</th>
<th width=”200″>直播课程名称</th>
<th>直播开始时间</th>
<th>直播结束时间</th>
<th>创建于</th>
<th width=”100″>操作</th>
</tr>
</thead>
<tbody>
@foreach ($lives as $live)
<tr class=”text-c”>
<td><input type=”checkbox” value=”1″ name=””></td>
<td>{{ $live->id }}</td>
<td>
@if ($live->img )
<img src=”{{ $live->img }}” />
@else
<img src=”{{ asset(‘img/default.png’) }}” />
@endif
</td>
<td>{{ $live->start_time }}</td>
<td>{{ $live->end_time }}</td>
<td>{{ $live->created_at }}</td>
<td><a title=”编辑” href=”javascript:;” onclick=”admin_permission_edit(‘角色编辑’,’admin-permission-add.html’,’1′,”,’310′)” class=”ml-5″ style=”text-decoration:none”><i class=”Hui-iconfont”></i></a> <a title=”删除” href=”javascript:;” onclick=”admin_permission_del(this,’1′)” class=”ml-5″ style=”text-decoration:none”><i class=”Hui-iconfont”></i></a></td>
</tr>
@endforeach
</tbody>
</table>
</div>
<!–_footer 作为公共模版分离出去–>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/jquery/1.9.1/jquery.min.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/layer/2.4/layer.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/static’) }}/h-ui/js/H-ui.min.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/static’) }}/h-ui.admin/js/H-ui.admin.js”></script> <!–/_footer 作为公共模版分离出去–>
<!–请在下方写此页面业务相关的脚本–>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/datatables/1.10.0/jquery.dataTables.min.js”></script>
<script type=”text/javascript”>
/*
参数解释:
title 标题
url 请求的url
id 需要操作的数据id
w 弹出层宽度(缺省调默认值)
h 弹出层高度(缺省调默认值)
*/
/*管理员-直播课程-添加*/
function admin_permission_add(title,url,w,h){
layer_show(title,url,w,h);
}
/*管理员-直播课程-编辑*/
function admin_permission_edit(title,url,id,w,h){
layer_show(title,url,w,h);
}
/*管理员-直播课程-删除*/
function admin_permission_del(obj,id){
layer.confirm(‘确认要删除吗?’,function(index){
$.ajax({
type: ‘POST’,
url: ”,
dataType: ‘json’,
success: function(data){
$(obj).parents(“tr”).remove();
layer.msg(‘已删除!’,{icon:1,time:1000});
},
error:function(data) {
console.log(data.msg);
},
});
});
}
</script>
</body>
</html>
3、添加功能
1)加载视图
步骤1:路由
步骤2:创建控制器对应方法并加载视图
步骤3:创建视图
步骤1:
步骤2:打开列表页,设置添加弹出看连接
2)加载视图 (修改form表单)
步骤1:控制器方法获取所有直播流数据传递给视图显示
步骤2:更改form表单
<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”renderer” content=”webkit|ie-comp|ie-stand”>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<meta name=”viewport” content=”width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no” />
<meta http-equiv=”Cache-Control” content=”no-siteapp” />
<!–[if lt IE 9]>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/html5shiv.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/respond.min.js”></script>
<![endif]–>
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/static’) }}/h-ui/css/H-ui.min.css” />
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/static’) }}/h-ui.admin/css/H-ui.admin.css” />
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/lib’) }}/Hui-iconfont/1.0.8/iconfont.css” />
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/static’) }}/h-ui.admin/skin/default/skin.css” id=”skin” />
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/static’) }}/h-ui.admin/css/style.css” />
<!–[if IE 6]>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/DD_belatedPNG_0.0.8a-min.js” ></script>
<script>DD_belatedPNG.fix(‘*’);</script>
<![endif]–>
<title>添加管理员 – 管理员管理 – H-ui.admin v3.1</title>
<meta name=”keywords” content=”H-ui.admin v3.1,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载”>
<meta name=”description” content=”H-ui.admin v3.1,是一款由国人开发的轻量级扁平化网站后台模板,完全免费开源的网站后台管理系统模版,适合中小型CMS后台系统。”>
</head>
<body>
<article class=”page-container”>
<form class=”form form-horizontal” id=”form-admin-add”>
<div class=”row cl”>
<label class=”form-label col-xs-4 col-sm-3″><span class=”c-red”>*</span>直播课程名称:</label>
<div class=”formControls col-xs-8 col-sm-9″>
<input type=”text” class=”input-text” value=”” placeholder=”” id=”adminName” name=”adminName”>
</div>
</div>
<div class=”row cl”>
<label class=”form-label col-xs-4 col-sm-3″>所属直播流:</label>
<div class=”formControls col-xs-8 col-sm-9″> <span class=”select-box” style=”width:150px;”>
<select class=”select” name=”adminRole” size=”1″>
@foreach ($streams as $stream)
<option value=”{{ $stream->id }}”>{{ $stream->stream_name }}</option>
@endforeach
</select>
</span> </div>
</div>
<div class=”row cl”>
<label class=”form-label col-xs-4 col-sm-3″><span class=”c-red”>*</span>直播日期:</label>
<div class=”formControls col-xs-8 col-sm-9″>
<input type=”text” onfocus=”WdatePicker({ maxDate:’#F{$dp.$D(\’start_time\’)||\’%y-%M-%d\’}’ })” id=”start_time” class=”input-text Wdate” style=”width:120px;”>
–
<input type=”text” onfocus=”WdatePicker({ minDate:’#F{$dp.$D(\’end_time\’)}’,maxDate:’%y-%M-%d’ })” id=”end_time” class=”input-text Wdate” style=”width:120px;”>
</div>
</div>
<div class=”row cl”>
<div class=”col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3″>
<input class=”btn btn-primary radius” type=”submit” value=” 提交 ”>
</div>
</div>
</form>
</article>
<!–_footer 作为公共模版分离出去–>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/My97DatePicker/4.8/WdatePicker.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/jquery/1.9.1/jquery.min.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/layer/2.4/layer.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/static’) }}/h-ui/js/H-ui.min.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/static’) }}/h-ui.admin/js/H-ui.admin.js”></script> <!–/_footer 作为公共模版分离出去–>
<!–请在下方写此页面业务相关的脚本–>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/jquery.validation/1.14.0/jquery.validate.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/jquery.validation/1.14.0/validate-methods.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/jquery.validation/1.14.0/messages_zh.js”></script>
<script type=”text/javascript”>
$(function(){
$(‘.skin-minimal input’).iCheck({
checkboxClass: ‘icheckbox-blue’,
radioClass: ‘iradio-blue’,
increaseArea: ‘20%’
});
$(“#form-admin-add”).validate({
rules:{
adminName:{
required:true,
minlength:4,
maxlength:16
},
password:{
required:true,
},
password2:{
required:true,
equalTo: “#password”
},
sex:{
required:true,
},
phone:{
required:true,
isPhone:true,
},
email:{
required:true,
email:true,
},
adminRole:{
required:true,
},
},
onkeyup:false,
focusCleanup:true,
success:”valid”,
submitHandler:function(form){
$(form).ajaxSubmit({
type: ‘post’,
url: “xxxxxxx” ,
success: function(data){
layer.msg(‘添加成功!’,{icon:1,time:1000});
},
error: function(XmlHttpRequest, textStatus, errorThrown){
layer.msg(‘error!’,{icon:1,time:1000});
}
});
var index = parent.layer.getFrameIndex(window.name);
parent.$(‘.btn-refresh’).click();
parent.layer.close(index);
}
});
});
</script>
<!–/请在上方写此页面业务相关的脚本–>
</body>
</html>
3)数据处理
表单验证插件:http://validform.rjboy.cn
后台表单提交插件说明:https://www.cnblogs.com/si-shaohua/p/3780321.html
步骤1:更改表单插件
<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”renderer” content=”webkit|ie-comp|ie-stand”>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<meta name=”viewport” content=”width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no” />
<meta http-equiv=”Cache-Control” content=”no-siteapp” />
<!–[if lt IE 9]>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/html5shiv.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/respond.min.js”></script>
<![endif]–>
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/static’) }}/h-ui/css/H-ui.min.css” />
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/static’) }}/h-ui.admin/css/H-ui.admin.css” />
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/lib’) }}/Hui-iconfont/1.0.8/iconfont.css” />
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/static’) }}/h-ui.admin/skin/default/skin.css” id=”skin” />
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/static’) }}/h-ui.admin/css/style.css” />
<!–[if IE 6]>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/DD_belatedPNG_0.0.8a-min.js” ></script>
<script>DD_belatedPNG.fix(‘*’);</script>
<![endif]–>
<title>添加管理员 – 管理员管理 – H-ui.admin v3.1</title>
<meta name=”keywords” content=”H-ui.admin v3.1,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载”>
<meta name=”description” content=”H-ui.admin v3.1,是一款由国人开发的轻量级扁平化网站后台模板,完全免费开源的网站后台管理系统模版,适合中小型CMS后台系统。”>
</head>
<body>
<article class=”page-container”>
<form class=”form form-horizontal” id=”form-admin-add”>
{{ csrf_field() }}
<div class=”row cl”>
<label class=”form-label col-xs-4 col-sm-3″><span class=”c-red”>*</span>直播课程名称:</label>
<div class=”formControls col-xs-8 col-sm-9″>
<input required type=”text” class=”input-text” value=”” placeholder=”” id=”live_name” name=”live_name”>
</div>
</div>
<div class=”row cl”>
<label class=”form-label col-xs-4 col-sm-3″>所属直播流:</label>
<div class=”formControls col-xs-8 col-sm-9″> <span class=”select-box” style=”width:150px;”>
<select class=”select” name=”stream_id” size=”1″>
@foreach ($streams as $stream)
<option value=”{{ $stream->id }}”>{{ $stream->stream_name }}</option>
@endforeach
</select>
</span> </div>
</div>
<div class=”row cl”>
<label class=”form-label col-xs-4 col-sm-3″><span class=”c-red”>*</span>直播日期:</label>
<div class=”formControls col-xs-8 col-sm-9″>
<input required type=”text” onfocus=”WdatePicker({ maxDate:’#F{$dp.$D(\’start_time\’)||\’%y-%M-%d\’}’ })” id=”start_time” name=”start_time” class=”input-text Wdate” style=”width:120px;”>
–
<input required type=”text” onfocus=”WdatePicker({ minDate:’#F{$dp.$D(\’end_time\’)}’,maxDate:’%y-%M-%d’ })” id=”end_time” name=”end_time” class=”input-text Wdate” style=”width:120px;”>
</div>
</div>
<div class=”row cl”>
<div class=”col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3″>
<input class=”btn btn-primary radius” type=”submit” value=” 提交 ”>
</div>
</div>
</form>
</article>
<!–_footer 作为公共模版分离出去–>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/My97DatePicker/4.8/WdatePicker.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/jquery/1.9.1/jquery.min.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/layer/2.4/layer.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/static’) }}/h-ui/js/H-ui.min.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/static’) }}/h-ui.admin/js/H-ui.admin.js”></script> <!–/_footer 作为公共模版分离出去–>
<!–请在下方写此页面业务相关的脚本–>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/jquery.validation/1.14.0/jquery.validate.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/jquery.validation/1.14.0/validate-methods.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/jquery.validation/1.14.0/messages_zh.js”></script>
<script type=”text/javascript”>
$(function(){
$(‘.skin-minimal input’).iCheck({
checkboxClass: ‘icheckbox-blue’,
radioClass: ‘iradio-blue’,
increaseArea: ‘20%’
});
$(“#form-admin-add”).validate({
rules:{
live_name:{
required:true,
minlength:4,
maxlength:16
},
start_time:{
required:true,
},
end_time:{
required:true,
},
},
onkeyup:false,
focusCleanup:true,
success:”valid”,
submitHandler:function(form){
$(form).ajaxSubmit({
type: ‘post’,
url: “{{ url(‘admin/live/add’) }}” ,
success: function(data){
window.parent.location.reload();
parent.layer.msg(‘添加成功!’,{icon:1,time:1000});
var index = parent.layer.getFrameIndex(window.name);
parent.$(‘.btn-refresh’).click();
parent.layer.close(index);
},
error: function(XmlHttpRequest, textStatus, errorThrown){
layer.msg(‘error!’,{icon:1,time:1000});
}
});
}
});
});
</script>
<!–/请在上方写此页面业务相关的脚本–>
</body>
</html>
步骤2:数据处理
//添加方法
public function add(Request $request)
{
//1.判断HTTP请求类型
if ($request->isMethod(‘post’)) {
//2.接受数据
$postData = $request->only([‘live_name’, ‘stream_id’, ‘start_time’, ‘end_time’]);
$postData[‘start_time’] = strtotime($postData[‘start_time’]);
$postData[‘end_time’] = strtotime($postData[‘end_time’]);
//3.插入数据库
$rs = Live::create($postData);
//4.判断状态
echo $rs ? 1 : 0;
} else {
//2.获取所有直播流数据
$streams = Stream::get();
//3.加载视图并传递数据
return view(‘admin.live.add’, compact(‘streams’));
}
}
在线教育首页
加载视图
- 步骤1:创建路由
- 步骤2:创建控制器方法并加载视图
- 步骤3:创建视图
数据处理(循环直播数据)
- 步骤1:更改控制器方法,查询数据
<?php
namespace App\Http\Controllers\Home;
use App\Http\Model\Live;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
class IndexController extends Controller
{
//首页
public function index()
{
//1.获取所有直播数据(保证正在直播中,注:实战工作中根据产品经理的算法显示首页数据)
$lives = Live::where(‘start_time’, ‘<‘, time())
->where(‘end_time’, ‘>’, time())
->limit(4)
->get();
//2.传递给视图
return view(‘home.index.index’, compact(‘lives’));
}
}
- 步骤2:视图循环显示
<ul class=”public-class-live-content clearfix”>
<!– <li>
<a style=”cursor:pointer” data-url=”/web/html/liveVideo.html?roomId=2C2A076B02BDE9FE9C33DC5901307461&courseId=126″>
<div class=”img”>
<img src=”{{ asset(‘home/img’) }}/7fc5a47439f2483b8dca9536144dcb6d.jpg”>
</div>
<div class=”public-class-live-detail”>
<div class=”detailCourseInfo clearfix”>
<div class=”detailCourseName” title=”PS超级设计师公开课”>PS超级设计师公开课</div>
<div class=”detailTeacher”>讲师:任老师</div>
</div>
<div class=”detailLiveInfo clearfix”>
<div class=”detailLiveDate”>最近直播:03/24 20:00</div>
<div class=”detailLiving”>
<img src=”{{ asset(‘home/img’) }}/zhiboNoStart.png” alt=””>
<span class=”noStart”>直播未开始</span>
</div>
</div>
</div>
</a>
</li> –>
@foreach ($lives as $live)
<li>
<a style=”cursor:pointer” >
<div class=”img”>
@if ($live->img )
<img src=”{{ $live->img }}” with=”285″ height=”161″/>
@else
<img src=”{{ asset(‘img/default.png’) }}” with=”285″ height=”161″/>
@endif
</div>
<div class=”public-class-live-detail”>
<div class=”detailCourseInfo clearfix”>
<div class=”detailCourseName” title=”PS超级设计师公开课”>{{ $live->live_name}}</div>
<div class=”detailTeacher”>讲师:任老师</div>
</div>
<div class=”detailLiveInfo clearfix”>
<div class=”detailLiveDate”>最近直播:03/24 20:00</div>
<div class=”detailLiving”>
<img src=”{{ asset(‘home/img’) }}/zhiboNoStart.png” alt=””>
<span class=”noStart”>直播未开始</span>
</div>
</div>
</div>
</a>
</li>
@endforeach
</ul>
点击首页直播,在线观看
步骤1:点击跳转到直播详情页
1)定义路由
2)修改首页跳转链接
步骤2:创建控制器方法,接受直播id,获取直播流相关信息拼接拉流地址
<?php
namespace App\Http\Controllers\Home;
use App\Http\Model\Live;
use App\Http\Model\Stream;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
class LiveController extends Controller
{
//视频播放页
public function detail(Request $request)
{
//1.接受数据获取直播流信息
$stream_id = $request->input(‘stream_id’);
//2.查询直播流信息
$stream = Stream::where(‘id’, $stream_id)->first();
//3.拼接拉流地址
$pullVideo = “rtmp://pili-live-rtmp.php.sk-school.com/201801140002/”.$stream->stream_name;
//2.传递给视图
return view(‘home.live.detail’, compact(‘pullVideo’));
}
}
步骤3:点击进入详情通过ck播放器播放
<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>ckplayer简单调用演示</title>
</head>
<body>
<div id=”a1″></div>
<script type=”text/javascript” src=”{{ asset(‘ck/ckplayer’) }}/ckplayer.js” charset=”utf-8″></script>
<script type=”text/javascript”>
var flashvars={
f:'{{ $pullVideo }}’,
c:0,
b:1,
i:’http://www.ckplayer.com/static/images/cqdw.jpg’
};
var video=[‘http://img.ksbbs.com/asset/Mon_1605/0ec8cc80112a2d6.mp4->video/mp4’];
CKobject.embed(“{{ asset(‘ck/ckplayer’) }}/ckplayer.swf”,’a1′,’ckplayer_a1′,’600′,’400′,false,flashvars,video)
function closelights(){//关灯
alert(‘ 本演示不支持开关灯’);
}
function openlights(){//开灯
alert(‘ 本演示不支持开关灯’);
}
</script>
</body>
</html>