[4-2] 特色皮肤模仿 (TikTok+Pornhub+Intellij)

• pornhub是黑金，和一些古代扇面一样好看
• tiktok是黑粉，有一种迷幻金属的感觉
• intellij是黑蓝，稳重和沉浸式的体验
• @code https://github.com/ui-javascript/natural-demo-unofficial-tiktok-porhub-skin

---

Pornhub-前端技术

Unofficial-Pornhub-Vuejs-Skin

• 仅作为简单示例
• 不会长期维护

upvs-配色方案

$white: #fff !default;
$black: #080002 !default;
$orange:#fe9900 !default;
$gray-dark:#2f2f2f !default;
$gray-light:#aeaeae !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black: #000 !default;

$blue: #0d6efd !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #d63384 !default;
$red: #de1c31 !default;
$orange: #fd7e14 !default;
$yellow: #fadb14 !default;
$green: #8cc269 !default;
$teal: #20c997 !default;
$cyan: #17a2b8 !default;

$primary: $orange !default;
$secondary: $gray-dark !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
$dark: $gray-800 !default;

upvs-组件列表

• Model
  • 支持搜索的输入框 @eg Input(mode=search)
  • 下拉菜单 Dropdown
  • 简单列表 List
• Layout
  • 分页 Pagination
  • 简单弹框 Dialog
• Effect
  • 标志 Logo

---

Unofficial-Tiktok-Reactjs-Skin

• 仅作为简单示例
• 不会长期维护

utrs-组件列表

---

参考

• 采访一位来自 Pornhub 的 Web 开发者
•  

成人网站行业对于推动 Web 的发展产生着巨大的影响

提高浏览器的视频限制
通过 WebSocket 推送广告 --> 应对广告拦截程序

不使用占位图片??

基础的播放器实现核心功能，并负责触发相应的事件
一支专门致力于开发视频播放器的团队

使用 Vanilla JS(原生)

// 有没有你想要更改，改进甚至创建的 Web API
1) 信标（Beacon）：由于某些 IOS 问题无法与 pageHide 事件一起使用
2) Fetch：没有下载进度，也没有提供拦截请求的方法
3) WebRTC：如果分辨率不够大，则及时进行屏幕共享，Simulcast 层也会受到限制
4) Service Workers：任何 service worker 的 Fetch 事件处理程序
均不会拦截navigator.serviceWorker.register 的调用


WebVR  --> WebVR 
第一个支持 VR，计算机视觉和虚拟表演者的主要平台

// 浏览器
放弃了对 IE11 之前版本的支持
同时，我们也停止了在视频播放器中使用 Flash
主要关注 Chrome 、Firefox 和 Safari

色情片永远不会死的事实也使得工作的稳定得到了保障