search

博客列表 >laravel实战-仿抖音项目-视频在线播放

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

岂几岂几
岂几岂几原创
2020年06月28日 00:32:501492浏览

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创建播放器对象.

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

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

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

3. 代码清单

  • 视图文件

    • 1-视频广场
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>视频广场</title>
  8.     <link rel="stylesheet" href="/static/plugin/layui/css/layui.css" media="all">
  9.     <script src="/static/plugin/layui/layui.js"></script>
  10.     <style>
  11.         body {
  12.             background-color: #000;
  13.             padding: 0;
  14.             margin: 0;
  15.             width: 100vw;
  16.             height: 100vh;
  17.         }
  19.         .title-area {
  20.             background-color: #000;
  21.             height: 50px;
  22.             line-height: 50px;
  23.             text-align: center;
  24.             color: #999;
  25.             position: fixed;
  26.             width: 100vw;
  27.             top: 0px;
  28.             z-index: 100;
  29.         }
  31.         .title-area>.return-back {
  32.             float: left;
  33.             margin-left: 5px;
  34.             font-size: 1.3rem;
  35.         }
  37.         .title-area>.title {
  38.             font-size: 1.2rem;
  39.         }
  41.         #carousel {
  42.             margin-top: 50px;
  43.         }
  45.         .video-list {
  46.             margin-top: 3px;
  47.             display: grid;
  48.             grid-template-columns: 1fr 1fr;
  49.             gap: 3px;
  50.         }
  52.         .video-list>.video-item {
  53.             background-color: #000;
  54.             position: relative;
  55.             text-align: center;
  56.             color: #fff;
  57.         }
  59.         .video-list>.video-item>img {
  60.             /* max-width: 100%;
  61.             max-height: 100%; */
  62.             /* max-width: 50vw;
  63.             max-height: 50vw; */
  64.             width: 100%;
  65.             height: 50vw;
  66.         }
  68.         .video-list>.video-item>span:first-of-type {
  69.             position: absolute;
  70.             bottom: 40px;
  71.             left: 10px;
  72.         }
  74.         .video-list>.video-item>span:last-of-type {
  75.             position: absolute;
  76.             bottom: 20px;
  77.             left: 10px;
  78.         }
  79.     </style>
  80. </head>
  82. <body onload="resizeItem()">
  83.     <!-- 标题区 -->
  84.     <section class="title-area">
  85.         <i class="layui-icon layui-icon-left return-back"></i>
  86.         <span class="title">视频广场</span>
  87.     </section>
  88.     <section class="layui-carousel" id="carousel">
  89.         <div carousel-item>
  90.             <!-- 条目中可以是任意内容，如：<img src=""> -->
  91.             <div>条目1</div>
  92.             <div>条目2</div>
  93.             <div>条目3</div>
  94.             <div>条目4</div>
  95.             <div>条目5</div>
  96.         </div>
  97.     </section>
  98.     <section class="video-list">
  99.         <div class="video-item">
  100.             <img src="/storage/douyin/1.jpg" alt="">
  101.             <span class="place">北京</span>
  102.             <span class="desc">来吧, 不后悔</span>
  103.         </div>
  104.         <div class="video-item">
  105.             <img src="/storage/douyin/2.jpg" alt="">
  106.             <span class="place">北京</span>
  107.             <span class="desc">来吧, 不后悔</span>
  108.         </div>
  109.         <div class="video-item">
  110.             <img src="/storage/douyin/3.jpg" alt="">
  111.             <span class="place">北京</span>
  112.             <span class="desc">来吧, 不后悔</span>
  113.         </div>
  114.         <div class="video-item">
  115.             <img src="/storage/douyin/4.jpg" alt="">
  116.             <span class="place">北京</span>
  117.             <span class="desc">来吧, 不后悔</span>
  118.         </div>
  119.         <div class="video-item">
  120.             <img src="/storage/douyin/5.jpg" alt="">
  121.             <span class="place">北京</span>
  122.             <span class="desc">来吧, 不后悔</span>
  123.         </div>
  124.         <div class="video-item">
  125.             <img src="/storage/douyin/6.jpg" alt="">
  126.             <span class="place">北京</span>
  127.             <span class="desc">来吧, 不后悔</span>
  128.         </div>
  129.         <div class="video-item">
  130.             <img src="/storage/douyin/7.jpg" alt="">
  131.             <span class="place">北京</span>
  132.             <span class="desc">来吧, 不后悔</span>
  133.         </div>
  134.         <div class="video-item">
  135.             <img src="/storage/douyin/8.jpg" alt="">
  136.             <span class="place">北京</span>
  137.             <span class="desc">来吧, 不后悔</span>
  138.         </div>
  139.     </section>
  140. </body>
  141. <script>
  142.     layui.use(['layer', 'carousel'], function () {
  143.         layer = layui.layer;
  144.         // 轮播
  145.         carousel = layui.carousel;
  147.         //建造实例
  148.         carousel.render({
  149.             elem: '#carousel'
  150.             , width: '100%' //设置容器宽度
  151.             , height: '120px'
  152.             // , arrow: 'always' //始终显示箭头
  153.             //,anim: 'updown' //切换动画方式
  154.         });
  156.         // 点击事件绑定到视频容器上，点击视频项，使用冒泡的方式向上传递点击事件，在视频容器上触发处理脚本
  157.         document.querySelector('.video-list').addEventListener('click', function(e) {
  158.             // 触发事件的元素
  159.             var item = e.target;
  160.             // 绑定事件的元素
  161.             var list = e.currentTarget;
  162.             // 因为绑定事件的元素是视频列表的容器，点击容器不需要触发任何逻辑。
  163.             if(item == list) {
  164.                 return;
  165.             }
  167.             window.location.href="/douyin/playVideo";
  168.         }, false);
  169.     });
  170. </script>
  172. </html>

  • 2-播放视频界面

    • 实际项目中, 视频地址是从DB中动态获取的, 这里使用写死的文件只显示播放效果.
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>播放视频</title>
  8.     <link rel="stylesheet" href="/static/plugin/layui/css/layui.css" media="all">
  9.     <script src="/static/plugin/layui/layui.js"></script>
  10.     <script type="text/javascript" src="/static/plugin/ckplayer/ckplayer/ckplayer.js"></script>
  11.     <style>
  12.     body {
  13.         background-color: #000;
  14.         padding: 0;
  15.         margin: 0;
  16.         width: 100vw;
  17.         height: 100vh;
  18.     }
  19.     </style>
  20. </head>
  22. <body>
  23.     <div id="video" style="widows: 100vw;height:100vh;"></div>
  24. </body>
  25. <script type="text/javascript">
  26.     var videoObject = {
  27.         container: '#video',//“#”代表容器的ID，“.”或“”代表容器的class
  28.         variable: 'player',//该属性必需设置，值等于下面的new chplayer()的对象
  29.         flashplayer:false,//如果强制使用flashplayer则设置成true
  30.         video:'/storage/douyin/1.mp4'//视频地址
  31.         ,mobileCkControls: true // 中间的大播放按钮
  32.         , click: true
  33.     };
  34.     var player=new ckplayer(videoObject);
  35. </script>
  36. </html>
  • 3-“抖音”控制器
  1. <?php
  2. namespace App\Http\Controllers\douyin;
  4. use App\Http\Controllers\Controller;
  6. class Douyin extends Controller {
  7.     public function index() {
  8.         return view('/douyin/square');
  9.     }
  10.     public function playVideo() {
  11.         return view('/douyin/playVideo');
  12.     }
  13. }
上一条：背景控制的常用属性下一条：flex实现PC端通用布局方案与移动端主页布局(高仿小米商城app主页静态)
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多