整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          英雄聯盟網站,遮罩層效果 #程序員

          罩層基礎版。

          基礎課中有朋友想了解遮罩層,今天就用四步完成英雄聯盟官網上的遮罩層效果。開始之前用十天的基礎課程知識做好準備工作。

          ·第一步:html結構和基礎樣式。添加一個did盒子,里面一個標題,兩行文本。此時遮罩層在主結構的下方,給遮罩層寫上固定寬高,背景顏色用黑色,帶點透明度。看下效果。標題和兩行文本寫上字體大小和字體顏色,看下效果。

          ·第二步:美化樣式。遮罩層添加背景圖片,不重復顯示,位置微調,文本內內容居中,標題居中設置,兩行文本也居中設置??聪滦Ч=o遮罩層加上那邊距,讓里面內容整體垂直居中。

          ·第三步:調整遮罩層位置。遮罩層絕對定位,同時外層盒子寫上相對定位代碼,開始設置位置,看下效果。

          ·第四步:讓遮罩層先隱藏,鼠標經過時再顯示即可。

          到此遮罩層效果就完成了。反過來用,只需要調整隱藏的順序,再加一點位置移動和顏色改變,效果更好。

          下次再講講遮罩層的靈活運用。

          頻彈出并帶遮罩層效果,在如今的互聯網上一艘一大堆,但很好有那種代碼非常規范,干凈,好用的,所以決定自己編寫一個,分享出來供大家參考。

          效果:

          實現:

          <!doctype html>

          <html>

          <head>

          <!--聲明頁面的字符編碼(一般有兩種):中文編碼(gbk/gb2312)、國際編碼(utf-8)-->

          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

          <title>視頻彈出,遮罩層應用 --刀刀</title>

          <meta name="keywords" content="關鍵字,遮罩層,刀刀" />

          <meta name="description" content="視頻彈出,遮罩層應用" />

          <!-- css/js -->

          <style>

          *{margin:0; padding:0;}

          body{font-size:12px;font-family:"微軟雅黑";color:#666;background:#dfa;height:2000px;}

          /* 標題 start */

          .subject{width:300px;height:32px;line-height:32px;margin:50px auto;}

          /* 標題 end */

          /* show start */

          .btn{width:185px; height:32px; line-height:32px;display:block;text-decoration:none;margin:0 auto;

          padding-left:15px;font-size:16px;border:1px solid #ccc;border-radius:16px;}

          .btn:hover{background:#d3d;color:#fff;}

          .show-box{width:700px;height:400px;background:#6cf;margin:30px auto; box-shadow:1px 3px 20px 8px #6a907f;

          position:absolute;z-index:1;display:none;}

          .bg-div{width:100%;height:100%;background:#000;opacity:0.3;filter:alpha(opacity=30);

          position:fixed;top:0;left:0;z-index:0;display:none;}

          /* show end */

          </style>

          </head>

          <body>

          <!-- 標題 start -->

          <h1 class="subject">視頻彈出,遮罩層應用 --刀刀</h1>

          <!-- 標題 end -->

          <!-- show start -->

          <a href="#" class="btn" >點我啊,給以一個驚喜</a>

          <div class="show-box">

          <!-- 視頻區:優酷的分享視頻 -->

          <embed src='http://player.youku.com/player.php/sid/XODQ0ODQwNjg4/v.swf' allowFullScreen='true' quality='high' width='700' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>

          </div>

          <div class="bg-div"></div>

          <!-- show end -->

          <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>

          <script>

          $(function(){

          $(".btn").on("click",function(){

          var _left=parseInt(($(window).width()-$(".show-box").width())/2);

          var _top=parseInt(($(window).height()-$(".show-box").height())/2);

          $(".show-box").show().css({left:_left,top:_top});

          $(".bg-div").show();

          });

          $(".bg-div").on("click",function(){

          $(".show-box").hide();

          $(".bg-div").hide();

          });

          });

          </script>

          </body>

          </html>

          聲明:本小編不是專業前端,純程序員一枚(一直希望前后端通吃的哈),并且使用Notepad++手工編寫。

          jquery需要自行引入。

          本文內容是筆者最近實現的 web 端彈幕組件—— Barrage UI(https://github.com/parksben/barrage) 的一個延伸。在閱讀本文的實例和相關代碼之前,不妨先瀏覽項目文檔,對組件的使用方式和相關接口進行了解。



          各位童鞋如果經常上 B 站(bilibili.com) ,應該對 蒙版彈幕 這個概念并不陌生。

          蒙版彈幕是由知名彈幕視頻網站 bilibili 于 2018 年中推出的一種彈幕渲染效果,可以有效減少彈幕文字對視頻主體信息的干擾。

          關于 B 站蒙版彈幕的實現原理,其實網上已經有很多細致的討論和研究。個人總結了一下,大致要點如下:

          1. 基于用戶數據和一些機器學習的相關應用,可以提煉出視頻的關鍵主體
          2. 服務端預先對視頻進行處理,并生成相應的蒙版數據
          3. 客戶端播放視頻時,實時地加載對應資源
          4. 通過一些前端的技術手段,實現彈幕的蒙版處理

          客戶端方面,由于 B 站彈幕是基于 div+css 的實現,因而采用了 svg 格式來傳輸矢量蒙版(至少目前是這樣),通過 CSS 遮罩的方式實現渲染。

          ■乎上有一篇關于這個方案的討論,感興趣的童鞋可以移步 這里(https://www.zhihu.com/question/279446628) 進行了解。

          Barrage UI

          Barrage UI(https://github.com/parksben/barrage) 是個人最近實現的一個前端彈幕組件,主要用于在前端頁面中掛載彈幕動畫。

          組件提供了一系列的操作接口以方便用戶對彈幕的相關特性進行定制。你也可以在渲染層面對動畫中的每一幀圖像進行處理,比如:

          1. 實時讀取視頻信息
          2. 對每一幀視頻圖像進行實時處理,計算出摳圖蒙版
          3. 將計算出的蒙版傳給彈幕組件,以實現實時的蒙版彈幕

          下面是基于 Barrage UI 組件實現的蒙版彈幕效果:

          編者注:圖片這么糊是微信公眾平臺的鍋。

          由于文中不方便嵌入視頻,Demo 的實際效果請移步到 此處(https://parksben.github.io/masking-danmaku-demo) 查看。

          下面我們來介紹如何實現上圖的動畫效果。

          色鍵(色度鍵控)

          Demo 中使用了初音小姐姐跳舞的視頻。最主要的特點是除了人物外,視頻的背景是比較一致的純色。對于這種類型的圖像,我們可以使用 色鍵 的方式進行摳圖(生成“蒙版”)。

          色度鍵控(https://zh.wikipedia.org/zh/%E8%89%B2%E9%94%AE),又稱色彩嵌空,是一種去背合成技術。Chroma 為純色之意,Key 則是抽離顏色之意。把被拍攝的人物或物體放置于綠幕的前面,并進行去背后,將其替換成其他的背景。此技術在電影、電視劇及游戲制作中被大量使用,色鍵也是虛擬攝影棚(Virtual studio)與視覺效果(Visual effects)當中的一個重要環節。

          下圖是色鍵技術的一個示例:在綠幕前穿著藍色衣服的小姐姐,左圖為去背前,右圖為去背后的新背景。

          如何扣取視頻圖像

          在瀏覽器環境中,我們可以通過 canvas 畫布實時地繪制視頻的每一幀,并從畫布中讀取到圖像中每個像素的 RGBA 信息,檢測每個點的 R(red)、G(green)、B(blue) 值是否滿足要求,最終將需要扣除的像素的 A(alpha) 值置為 0,即可得到用于合成蒙版彈幕的蒙版圖像。

          注意:

          Barrage UI 組件的蒙版功能是基于 Canvas 2D API 的 CanvasRenderingContext2D.globalCompositeOperation 屬性實現的(使用了 source-in 的混合模式),因而只需將不需要的像素設置為透明(alpha=0)即可,并不需要改變圖像的 RGB 色值。

          下面介紹此案例的代碼實現。

          具體實現

          安裝 Barrage UI 組件

          直接使用 yarn 或 npm 安裝此組件:

          yarn add barrage-ui or npm install --save barrage-ui

          HTML + CSS

          準備一個 video 元素用于播放視頻,video 的父級元素用于掛載彈幕:

          <div id="container">
            <video id="video" src="videos/demo.mp4" controls>
          </video>
          </div>

          根據視頻的實際尺寸(880×540)設置 #container#video 的樣式:

          html,
          body {
            font: 14px/18px Helvetica, Arial, 'Microsoft Yahei', Verdana, sans-serif;
            width: 100%;
            margin: 0;
            padding: 0;
            background: #eee;
            overflow: hidden;
          }
          #container,
          #video {
            width: 880px;
            height: 540px;
          }
          #container {
            margin: 0 auto;
            margin-top: 50vh; 
            margin-left: 50vw; 
            transform: translate(-50%, -50%);
            background-color: #ddd;
          }

          創建彈幕

          import Barrage from 'barrage-ui';
          import data from 'utils/mockData';
          
          // 獲取父級容器
          const container = document.getElementById('container');
          
          // 創建彈幕實例
          const barrage = new Barrage({
            container: container,
          });
          
          // 重置畫布高度,避免彈幕遮擋視頻播放控件
          barrage.canvas.height = container.clientHeight - 80;
          
          // 裝填彈幕數據
          barrage.setData(data);

          其中,mockData 是用于生成隨機彈幕數據的方法。

          關于彈幕數據的內容與格式,詳見 Barrage UI 項目文檔(https://github.com/parksben/barrage#%E8%A3%85%E5%A1%AB%E5%BC%B9%E5%B9%95)

          實時獲取視頻圖像

          // 獲取 video 元素
          const video = document.getElementById('video');
          
          // 新建一個畫布來實時繪制視頻(純繪圖,不用添加進頁面)
          const vCanvas = document.createElement('canvas');
          vCanvas.width = video.clientWidth;
          vCanvas.height = video.clientHeight;const vContext = vCanvas.getContext('2d');
          
          // 實時繪制視頻到畫布
          barrage.afterRender = () => {
            vContext.drawImage(video, 0, 0, vCanvas.width, vCanvas.height);
          };

          使用組件提供的渲染周期鉤子 .afterRender() 可以在彈幕動畫的每一幀圖像渲染后,將視頻圖像繪制到中間畫布 vCanvas 上。注意這里的 vCanvas 畫布主要用于實時地獲取視頻圖像,并不需要添加到頁面中。

          實時計算蒙版信息

          // 渲染前讀取畫布 vCanvas 的數據,并處理為蒙版圖像
          barrage.beforeRender = () => {
          
            // 讀取圖像
            const frame = vContext.getImageData(0, 0, vCanvas.width, vCanvas.height);
            
            // 圖像總像素個數
            const pxCount = frame.data.length / 4; 
            
           // 將 frame 構造成我們需要的蒙版圖像
            for (let i = 0; i < pxCount; i++) {
              // 這里不用 ES6 解構賦值的寫法,主要為了保證性能
              // PS: 這里如果用解構賦值語法將導致大量新對象的創建,是個很耗時的過程
              const r = frame.data[i * 4 + 0];
              const g = frame.data[i * 4 + 1]; 
              const b = frame.data[i * 4 + 2];
              
              // 將黑色區域以外的內容設為透明
              if (r > 15 || g > 15 || b > 15) {
                frame.data[4 * i + 3] = 0;
              }
            }
              
            // 設置蒙版
            barrage.setMask(frame);
          };

          使用組件提供的渲染周期鉤子 .beforeRender() 可以在彈幕動畫的每一幀圖像渲染前計算出蒙版圖像。其中,用于更新蒙版的接口為 .setMask()。

          視頻、彈幕的操作綁定

          最后,為了讓彈幕的行為與視頻播放的操作協同,還需要進行一些綁定的操作:

          // 綁定播放事件
          video.addEventListener(  'play',
            ( ) => {
              barrage.play();
            },  false);
          
          // 綁定暫停事件
          video.addEventListener(  'pause',
            ( ) => {
              barrage.pause();
            },  false);
          
          // 切換播放進度
          video.addEventListener(  'seeked',
            ( ) => {
              barrage.goto(video.currentTime * 1000);
            },  false);

          這里分別用到 Brrage UI 組件的 .play() .pause .goto() 三個接口,分別用于播放、暫停切換彈幕動畫的進度。需要注意的是,通過 video.currentTime 屬性獲取到的視頻播放進度是一個單位為 的浮點數,需要轉換為 毫秒數 再傳給彈幕組件。

          源碼奉上

          本文的案例已上傳 Github,感興趣的童鞋可以點擊 這里(https://github.com/parksben/masking-danmaku-demo) 查看源碼細節。

          關于 Barrage UI 組件如果有什么建議和疑問,歡迎大家在項目中提 issue 給我,幫助我持續改進和迭代,更歡迎 star 和 PR。


          作者:Parksben

          來源:微信公眾號:創宇前端

          出處:https://mp.weixin.qq.com/s/0HwQh5nUaK6Vi0EWbU8ENQ


          主站蜘蛛池模板: 无码毛片一区二区三区视频免费播放 | 波多野结衣中文字幕一区二区三区| 91在线一区二区三区| 国产一区二区三区在线免费观看 | 激情爆乳一区二区三区| 亚洲电影唐人社一区二区| 中文字幕精品亚洲无线码一区应用| 久久久久久人妻一区二区三区| 一区二区三区日韩精品| 国产一区二区内射最近更新| 亚洲国产精品一区二区第四页 | 福利一区国产原创多挂探花| 精品国产一区二区三区久久狼| 亚洲国产情侣一区二区三区| 久久青草国产精品一区| 亚洲一区二区三区影院 | 国产乱码精品一区二区三区麻豆 | 国产一区二区三区无码免费| 天美传媒一区二区三区| 欧美成人aaa片一区国产精品| 亚洲av乱码一区二区三区香蕉| 久久久综合亚洲色一区二区三区 | 亚州国产AV一区二区三区伊在| 在线观看精品一区| 在线电影一区二区三区| 在线视频亚洲一区| 男人的天堂亚洲一区二区三区| 国产一区二区影院| 国产色精品vr一区区三区| 一区免费在线观看| 曰韩精品无码一区二区三区| 日本欧洲视频一区| 亚洲香蕉久久一区二区| 亚洲无码一区二区三区| 在线免费观看一区二区三区| 福利一区福利二区| 久久精品亚洲一区二区| 国内精品一区二区三区东京| 最新中文字幕一区| 国产精品成人国产乱一区| 国99精品无码一区二区三区|