简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > laravel实战-仿抖音项目-视频在线播放
Blogger Information
Blog 57
fans 3
comment 0
visits 59785
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
laravel实战-仿抖音项目-视频在线播放
岂几岂几
Original
1478 people have browsed it

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. }
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：学得挺快, 加油
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！