查看详情

如何实现 Bilibili 视频播放Chrome 媒体控制效果

Chrome 最新的版本更新了媒体控制菜单的按钮 UI,也就是每次我们的网页产生声音或者视频时候,菜单栏头像附近,方便我们在多个 Tab 进行控制时候加的,方便我们操作这些网页 Tab 下面的音视频。 尤其最新的样式实现非常酷炫,加入对封面的支持,这样整体效果看着非常棒。 很早之前我们写过一篇关于 使用 mediaSession 实现媒体播放的通知栏控制 这里介绍了我们如何在网页播放音频的时候锁屏控件如何显示当前播放音乐的封面和简介,或者控制上一曲下去。 同意视频播放现在也可以,你只需要监听 MediaSession 的相关事件然后设置 mediaSession MetaData 的信息就好。 设置封面标题 if ('mediaSession' in navigator) { var data = mediaList[index] navigator.mediaSession.metadata = new MediaMetadata({ title: data.title, artist: data.director, artwork: [ { src: data.cover, sizes: '192x192' } ] }); } 进行播放控制 // $video has 详情 »

查看详情

IFrame 等开放服务存在的法律风险警示

目前很多视频服务商比如 Bilibili, 优酷, 腾讯等都支持基于 iFrame,将自己上传的视频或者别的作者的视频, 内嵌到自己的网站,从而提升内容或者宣传的质量。记得很早的时候火影忍者中文网就是嵌入的优酷的视频。 IFrame 不仅降低了接入成本,也降低了接入门槛,稍微懂点相关的知识就可以投放到自己的网站。但是这里实际上会存在一种安全警示。 我们知道腾讯视频除了(B站)是有前贴广告的,这么做是为了增加金主爸爸的品牌广告的曝光量。而基于 IFrame 的形式,很容易被一些广告主当做免费的视频托管平台,把自己的一些教程或者宣传该网站金主爸爸广告的视频嵌入到比较吸睛的内容上(赌博,色情等)。 不妨看下下面这张截图: 是不是很多人经常不慎点进去,为了方便大家使用,网站主可能会投一些教程视频,方便大家学习如何充值以及如何参与等。然而这里面的风险点,便是这样的网站对前贴曝光的品牌比如一些金主爸爸的(保洁,苹果,华为等),实际上是品牌影响的,就像很多人一看这个视频,会觉得是这些品牌在该网站的投放,从而进一步对该网站产生信任或者对该广告品牌产生质疑。 又或者在某些色情网站上,色情网站流量较大经常会嵌入一些游戏的广告链接导流,比如经常看到渣渣辉或者山鸡的传奇游戏广告,这些网站为了宣传游戏的吸引力会投入一些视频做宣传。因此这些色情网站也会嵌入到当前网站中。 然而风险点同样在于前贴广告的曝光,会非常影响这些广告主品牌效应,你想想你在浏览 xxx 网站,刚好你是某品牌的员工,看到自家的广告在这样的网站上播放,可能内心一种无奈在心头,又或者更多问号在头上? 所以我们在做任何开放服务尤其基于 iFrame 做好对 详情 »

查看详情

Swift 和 Kotlin 获取代码执行行数和文件名

如果我们需要需要实现一个类似打印当前函数调用的文件名和函数的化,我们需要借助一些类库。 在 swift 中我们可以借助 #file 和 #line 来实现数据获取/。 类似 public static func log(file: String = #file, line: Int = #line) { } 而在 Android 我们需要借助 Thread 来实现 var str = "" try { val filename = Thread.currentThread().stackTrace[your_trace_index].fileName val line = Thread.currentThread().stackTrace[your_trace_index].lineNumber str = " $filename [l$line]" } catch (err: 详情 »

查看详情

VR 中 Monoscopic 和 Stereoscopic 的区别

无论是 VR 拍摄还是 VR 开发中,我们都会遇到这个问题,关于Mono(monoscopic) 和 Stereo(stereoscopic) 的选择。这里简单给大家科普下 在 AR/VR 显示技术原理 (上) 中,曾经涉及到,双眼和单眼成像的区别。而 Monoscopic 和 Stereoscopic 的区别就和这个相关。 Monoscopic (简称 mono) 实际上来源一个镜头的采集,通过本身角度的变化,类似于从0-360 这样来进行连续采集,而这样的图片在还原的时候,有个特点,就是周围距离自己的距离是一致的,比如最近自如VR 的单摄像头拍摄就是这个原理。 Stereoscopic(简称 stereo ) 实际上是双摄像头进行采集。我们知道人体双眼对距离的感知是很明显,所以这种方式采集对物体的距离感非常明显,这也是专业 VR 摄像所采用的设备。比如 Insta360 Pro2 我们可以看到它的镜头分布。 而它由于是多摄像头拍摄,因此平面视频会是不同的风格, 由于这是模拟人眼的方式,因此人类在感知还原的时候对于深度和距离非常准确,VR 详情 »

查看详情

gerrit 保持 commit id

最近接触到了 gerrit ,主要方便大家进行代码 Review; 当然大家可能会遇到 review 发出去后,发现还有一些需要更改的,又需要重新提交一些。为了保持同一个 commit id ,你可以使用 # 回撤 git reset --soft HEAD~1 git add . git commit -m 'paste your commit content' 你只需要把网页里面的 commit 内容粘贴进去就好,这样发就回指向到同一个 review url 地址了。 详情 »

查看详情

iOS WebView 对 H5 视频播放的控制

各大厂商在媒体播放这块一般管控都比较严格,所以经常会出现一些非常规的行为,比如 iOS 唤出全屏,比如自动播放,比如画中画(PiP) 无法唤起等问题。 在 iOS 中,我们各个 App 引入的 Webview 容器都是官方推荐的 WKWebView ,我们需要它来加载我们的网页,从而完成部分功能。但是处于安全隐私的考虑,它默认的一些属性是并不开启的。其中我们比较关注的视频播放有这么几项: applicationNameForUserAgent 用于设置 WebView user agent allowsInlineMediaPlayback 是使用h5的视频播放器在线播放, 还是使用原生播放器全屏播放 mediaTypesRequiringUserActionForPlayback 允许哪些媒体格式需要用户手动触发播放 allowsAirPlayForMediaPlayback 是否允许 Apple 的 Airplay allowsPictureInPictureMediaPlayback 是否允许 画中画模式(PiP) 在 Swift 中,我们可以简单的初始化一个 webview struct WebView: UIViewRepresentable { let request: URLRequest var config = WKWebViewConfiguration( 详情 »

查看详情

Vue-core-video-player support HLS format now

As is known to us. HLS is an important video format for all big video service platform for Apple, Netflix and Tencent Video Entertainment. HLS is a media streaming protocol for delivering visual and audio media to viewers over the internet. HLS protocol chops up MP4 video content into short (10-second) chunks with the .ts file 详情 »

查看详情

iOS 13+ Safari 启用陀螺仪授权

iOS 13 在升级的时候 Webkit 更新了部分描述,其中有一点 Added a permission API on iOS for DeviceMotionEvent and DeviceOrientationEvent. 开始对设备运动和旋转进行授权才可以启用数据的读取。 关于设备运动和旋转的数据,iOS 12+ 时候就进行过一次调整,需要用户手动前往 Safari 设置。这个时候你需要提示用户如何进行设置; 当然对于 iOS 13 的话,我们需要在用户和页面交互后,出发 权限申请; $('.btn').on('click', function() { if (typeof DeviceOrientationEvent.requestPermission === 'function') { DeviceOrientationEvent.requestPermission() .then(permissionState => { if (permissionState === 'granted') { // handle data } else { // handle denied } }) .catch( 详情 »

查看详情

头条/支付宝/猿辅导 Web 前端面试经历

由于公司年前的一些战略调整,和自己预感公司路线的担忧,自己也不得不提前准备一些后路,这期间陆续面试了头条,西瓜视频这边,支付宝公益这边和猿辅导这块。这次和三年前的职业变更,leetcode 刷了一些,但是其实也没刷多少,至少面头条的时候,也只是刷了少数 easy / medium 和那些后端相比少了很多。 然后就是特别推荐这个技术图,去准备复习的知识点: 现代前端技术知识体系 这期间,还有就是对自己特别模糊记忆不清楚的一定记笔记,这期间自己 Evernote 也不断誊抄“答案” 也有 32篇左右,主要还是需要不断加强记忆,尤其面试前。 简单说下三家的各自经历吧。 字节跳动-视频架构 这个大概是十一月面的,这个时候离职意愿还没有那么强烈,而是帮助前同事去完成一个内推名额。打心底,我觉得头条加班多,以及江湖一些小恩怨,我不太偏向去。不过面试还是认认真真的准备,听闻面试很难,加上自己本身是偏 Engineering (Production > Science)多点那种, 所以感觉跪的概率还是比较大。 大概一面是交叉面,是在头条的海淀总部那边,是安全的前端小哥,感觉年龄很年轻(我前同事说她去头条最大感觉就是小鲜肉太多了)。一面纯粹是基础面试题,涉及 JS 的非常多,大概题目我后面记录了下: 详情 »

查看详情

Web 前端崩溃监控优化历程

如何监听浏览器崩溃一直都是前端的难点。本文利用 Service Worker 的一些特性,实现对页面的崩溃的监控。 详情 »