查看详情

ExoPlayer QoE 解读

对于很多初次尝试播放器的同学而言,在完成基本的开发的下一步,是需要对整个播放状况有个初步的认识,其中需要涉及到埋点设计和实现,因此这一块,对于新手而言是非常有难度的。 之前写过文章 基于 Android EXOPlayer 创建视频播放器 介绍过 ExoPlayer。它是谷歌开源的一款播放器,目前用于 YouTube 生产线,我推荐新手区学习它的原因,它整体包很小,里面有很多不错的实现帮助我们去理解播放最基本的事情。当然如果在生产线,还需要结合自己的实际情况取舍,可以参考 Ijkplayer、ExoPlayer、VLC播放器综合比较 的对比,再做实际选择,这里从 ExoPlayer 为基础,分析整个如何确保我们播放体验(QoE)文档。 接入 AnalyticsListener AnalyticsListener 是 Exoplayer 里面实现的一个接口,用于使用该播放器的开发同学方便的进行播放指标相关的统计。 class VideoQoEListener() : AnalyticsListener { override fun onRenderedFirstFrame(eventTime: AnalyticsListener.EventTime, surface: Surface?) { // Add Your Code to 详情 »

查看详情

Android WebView onPageFinished 对于 Document 意味着什么?

这是因为之前遇到一个线上问题引起的,这篇文章阅读的对象也比较适合 Android 和前端阅读。 我们说下 标题的 Document 对象,这个对 Android 开发者而言有些陌生,可以详见 MDN 里面的解释,简单的说就是它可以去代表我们要加载的这个网页对象。里面包含一些基本的信息和所谓生命周期。 Android WebView 提供了基于 WebViewClient 的页面周期的监听方法,常见的有: onPageStarted 当页面开始请求 onPageFinished 页面完成加载 onReceivedError 当加载出现错误的时候 更多方法可以详见 https://developer.android.com/reference/android/webkit/WebViewClient 在 JS 中,我们监听页面加载有两种常见的方法,一种是监听 window.onload 另外一个是 document 里的 readychange 来实现的。 其中 window.onload 定义是当页面完全加载时候触发,包括页面的上包含的图片和样式资源,脚本资源。 而 详情 »

查看详情

如何实现 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( 详情 »