laravel实战-仿抖音项目-视频在线播放

学习心得

报班的目的, 一是想系统的学习PHP互联网开发, 第二个就是想学习网络中的视频播放和如何保护资源安全. 西门老师只介绍了视频播放, 视频安全方面, 提供了视频地址加密和阿里云oss服务的思路, 感觉好像还是不懂怎么做, 先自己看手册吧.
web项目中引入第三方插件的一般套路是: 文件包放到/public目录; 页面文件引入插件js, css等文件; 布局中增加一个容器; 使用js创建插件对象, 传入字面量对象设置插件参数.
使用冒泡的方式, 在视频列表容器绑定监听点击事件的处理脚本, 点击视频项, 事件冒泡到视频列表容器, 触发事件处理脚本.
使用定位的方式把标题栏固定在顶部时, 记得加上z-index: 大大的数样式属性, 否则标题栏还是会被滚动的内容遮盖.
目前主流浏览器已禁用视频自动播放功能, 并不是系统bug, 也不是插件bug, 不必纠结.

1. 在项目中使用ckplayer

到ckplayer官网下载播放器文件包，解压到/public文件夹中，建议放到/public/static/plugin/中.
在前端页面布局中加入渲染播放器的容器<div id="video" style="widows: 100vw;height:100vh;"></div>
使用js创建播放器对象.

<script type="text/javascript">
    var videoObject = {
        container: '#video',//“#”代表容器的ID，“.”或“”代表容器的class
        variable: 'player',//该属性必需设置，值等于下面的new chplayer()的对象
        flashplayer:false,//如果强制使用flashplayer则设置成true
        video:'/storage/douyin/1.mp4'//视频地址
        ,mobileCkControls: true // 中间的大播放按钮
        , click: true
    };
    var player=new ckplayer(videoObject);
</script>

2. 视频列表中点击视频项跳转到播放界面播放

// 点击事件绑定到视频容器上，点击视频项，使用冒泡的方式向上传递点击事件，在视频容器上触发处理脚本
document.querySelector('.video-list').addEventListener('click', function(e) {
    // 触发事件的元素
    var item = e.target;
    // 绑定事件的元素
    var list = e.currentTarget;
    // 因为绑定事件的元素是视频列表的容器，点击容器不需要触发任何逻辑。
    if(item == list) {
        return;
    }
    window.location.href="/douyin/playVideo";
}, false);

3. 代码清单

视图文件
- 1-视频广场

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频广场</title>
    <link rel="stylesheet" href="/static/plugin/layui/css/layui.css" media="all">
    <script src="/static/plugin/layui/layui.js"></script>
    <style>
        body {
            background-color: #000;
            padding: 0;
            margin: 0;
            width: 100vw;
            height: 100vh;
        }
        .title-area {
            background-color: #000;
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: #999;
            position: fixed;
            width: 100vw;
            top: 0px;
            z-index: 100;
        }
        .title-area>.return-back {
            float: left;
            margin-left: 5px;
            font-size: 1.3rem;
        }
        .title-area>.title {
            font-size: 1.2rem;
        }
        #carousel {
            margin-top: 50px;
        }
        .video-list {
            margin-top: 3px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3px;
        }
        .video-list>.video-item {
            background-color: #000;
            position: relative;
            text-align: center;
            color: #fff;
        }
        .video-list>.video-item>img {
            /* max-width: 100%;
            max-height: 100%; */
            /* max-width: 50vw;
            max-height: 50vw; */
            width: 100%;
            height: 50vw;
        }
        .video-list>.video-item>span:first-of-type {
            position: absolute;
            bottom: 40px;
            left: 10px;
        }
        .video-list>.video-item>span:last-of-type {
            position: absolute;
            bottom: 20px;
            left: 10px;
        }
    </style>
</head>
<body onload="resizeItem()">
    <!-- 标题区 -->
    <section class="title-area">
        <i class="layui-icon layui-icon-left return-back"></i>
        <span class="title">视频广场</span>
    </section>
    <section class="layui-carousel" id="carousel">
        <div carousel-item>
            <!-- 条目中可以是任意内容，如：<img src=""> -->
            <div>条目1</div>
            <div>条目2</div>
            <div>条目3</div>
            <div>条目4</div>
            <div>条目5</div>
        </div>
    </section>
    <section class="video-list">
        <div class="video-item">
            <img src="/storage/douyin/1.jpg" alt="">
            <span class="place">北京</span>
            <span class="desc">来吧, 不后悔</span>
        </div>
        <div class="video-item">
            <img src="/storage/douyin/2.jpg" alt="">
            <span class="place">北京</span>
            <span class="desc">来吧, 不后悔</span>
        </div>
        <div class="video-item">
            <img src="/storage/douyin/3.jpg" alt="">
            <span class="place">北京</span>
            <span class="desc">来吧, 不后悔</span>
        </div>
        <div class="video-item">
            <img src="/storage/douyin/4.jpg" alt="">
            <span class="place">北京</span>
            <span class="desc">来吧, 不后悔</span>
        </div>
        <div class="video-item">
            <img src="/storage/douyin/5.jpg" alt="">
            <span class="place">北京</span>
            <span class="desc">来吧, 不后悔</span>
        </div>
        <div class="video-item">
            <img src="/storage/douyin/6.jpg" alt="">
            <span class="place">北京</span>
            <span class="desc">来吧, 不后悔</span>
        </div>
        <div class="video-item">
            <img src="/storage/douyin/7.jpg" alt="">
            <span class="place">北京</span>
            <span class="desc">来吧, 不后悔</span>
        </div>
        <div class="video-item">
            <img src="/storage/douyin/8.jpg" alt="">
            <span class="place">北京</span>
            <span class="desc">来吧, 不后悔</span>
        </div>
    </section>
</body>
<script>
    layui.use(['layer', 'carousel'], function () {
        layer = layui.layer;
        // 轮播
        carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#carousel'
            , width: '100%' //设置容器宽度
            , height: '120px'
            // , arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
        // 点击事件绑定到视频容器上，点击视频项，使用冒泡的方式向上传递点击事件，在视频容器上触发处理脚本
        document.querySelector('.video-list').addEventListener('click', function(e) {
            // 触发事件的元素
            var item = e.target;
            // 绑定事件的元素
            var list = e.currentTarget;
            // 因为绑定事件的元素是视频列表的容器，点击容器不需要触发任何逻辑。
            if(item == list) {
                return;
            }
            window.location.href="/douyin/playVideo";
        }, false);
    });
</script>
</html>

2-播放视频界面
- 实际项目中, 视频地址是从DB中动态获取的, 这里使用写死的文件只显示播放效果.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>播放视频</title>
    <link rel="stylesheet" href="/static/plugin/layui/css/layui.css" media="all">
    <script src="/static/plugin/layui/layui.js"></script>
    <script type="text/javascript" src="/static/plugin/ckplayer/ckplayer/ckplayer.js"></script>
    <style>
    body {
        background-color: #000;
        padding: 0;
        margin: 0;
        width: 100vw;
        height: 100vh;
    }
    </style>
</head>
<body>
    <div id="video" style="widows: 100vw;height:100vh;"></div>
</body>
<script type="text/javascript">
    var videoObject = {
        container: '#video',//“#”代表容器的ID，“.”或“”代表容器的class
        variable: 'player',//该属性必需设置，值等于下面的new chplayer()的对象
        flashplayer:false,//如果强制使用flashplayer则设置成true
        video:'/storage/douyin/1.mp4'//视频地址
        ,mobileCkControls: true // 中间的大播放按钮
        , click: true
    };
    var player=new ckplayer(videoObject);
</script>
</html>

3-“抖音”控制器

<?php
namespace App\Http\Controllers\douyin;
use App\Http\Controllers\Controller;
class Douyin extends Controller {
    public function index() {
        return view('/douyin/square');
    }
    public function playVideo() {
        return view('/douyin/playVideo');
    }
}

批改老师：

天蓬老师

批改状态：合格

老师批语：学得挺快, 加油

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

PHP基础-字符串函数

2020-05-21 10:52:20