为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

Pornhub-前端技术

image-20201129121343112

image-20201129121343112

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-组件列表


参考



提高浏览器的视频限制
通过 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



点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消