查看详情

基于 Android EXOPlayer 创建视频播放器

谷歌在开放 Android 套件的时候也非常方便的把自家的 Youtube 播放相关的前端开源总结了出来，也就是我们经常提到的 ExoPlayer 。这里也顺道说下其他端，如果你是 Web 端，你可以使用 谷歌家的 shaka-player , 如果你是 iOS 的话，你可以使用 AVPlayer 。他们都提供从基础 UI 空间到自适应分辨率的支持。当然你也可以选择其他框架。 创建一个简单的 MP4 播放器 首先我们引入依赖 implementation 'com.google.android.exoplayer:exoplayer:2.11.7' 这里我是直接用的最新的版本 2.11.7 接下来我们需要做一些初始化的工作 val player = SimpleExoPlayer.Builder(context!!).build() exoplayer_view.player = player val dataSourceFactory: DataSource.Factory = DefaultDataSourceFactory( 详情 »

查看详情

如何实现 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 做好对 详情 »

查看详情

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 详情 »

查看详情

《转》着色器语言 GLSL (opengl-shader-language)入门大全

基本类型 void 空类型,即不返回任何值 bool 布尔类型 true,false int 带符号的整数 signed integer float 带符号的浮点数 floating scalar vec2, vec3, vec4 n维浮点数向量 n-component floating point vector bvec2, bvec3, bvec4 n维布尔向量 Boolean vector ivec2, ivec3, ivec4 n维整数向量 signed integer vector mat2, mat3, mat4 2x2, 3x3, 4x4 浮点数矩阵 float matrix sampler2D 2D纹理 a 2D texture samplerCube 盒纹理 cube mapped texture 详情 »

查看详情

使用 chrome://media-internals 更好的进行音视频 Debug

随着短视频和在线教育办公的兴起，我们非常倚重浏览器的音视频项目开发。 Chrome 提供了一款非常好的内部状态栏，帮助我们去了解当前音视频的编码，buffer 状态等信息。 我们可以随机打开两个在线视频播放网站比如: https://www.bilibili.com/bangumi/play/ep313573 https://v.youku.com/v_show/id_XMzQ2OTk2Mjky.html 然后我们可以在浏览器新建 tab 输入 chrome://media-internals/ 我们可以看到四个 tab Players 当前播放视频的日志信息 Audio 当前音频的播放日志信息 Video Capture 当前摄像头的状况 Audio Focus 当前音频播放的 Session 其中我们主要关心前两个 Tab。 在 Players 我们是一个看到一个历史纪录，我们可以根据视频的 CDN 源找到当前正在播放的视频。然后点击，最底部我们可以在最底部看到两栏，Player Properties 和 Log。 详情 »

查看详情

聊聊 Web 视频播放的画中画模式

Chrome 在升级到 70 的时候开始对视频播放的画中画模式开始支持了，用户在浏览器 Web 页面可以通过 画中画的形式强当前画面停留在屏幕正上方，无论你在使用其他软件还是切到其他 Tab ，都可以看到当前画面。 最新的 caniuse 我们可以看到已经覆盖了很多了浏览器版本，包括 最新的 Safari 甚至移动 Android 的 Chrome 浏览器。 特征检测 我们可以通过 video 元素上的 requestPictureInPicture 的方法以及 document.pictureInPictureElement 来判断浏览器是否支持画中画模式。 if ('pictureInPictureEnabled' in document) { // do something } else { // not support } if (typeof videoEl.requestPictureInPicture === 'function') { // do something } else { // not support } API 调用 我们可以通过调用 requestPictureInPicture 来实现画中画播放模式。 someBtn. 详情 »

查看详情

【译】Web 视频播放前前后后

这应该是目前写的最为完整的关于 Web 视频播放的文章。从简单的 Video 元素到 MSE 直播的应用，作者给出了具体的代码，文章由浅入深，普及现代 Web 播放技术的前前后后。五星推荐阅读。 @Paul Berberian 原文地址: https://medium.com/canal-tech/how-video-streaming-works-on-the-web-an-introduction-7919739f7e1 注意：本文是JavaScript视频流的介绍，主要针对Web开发人员。这里的大部分示例都使用HTML和现代JavaScript（ES6）。如果您对它们还不够熟悉，那么您可能会发现很难继续学习，尤其是代码示例。 原生视频 API 从2000年代初期到后期，网络上的视频播放主要依靠Flash插件。 ** 警告用户安装Flash插件 ** 这是因为当时没有其他方法可以在浏览器上流式传输视频。作为用户，您可以选择安装Flash或Silverlight之类的第三方插件，还是根本无法播放任何视频。 为了填补这个空白，WHATWG 开始研究 HTML 标准的新版本，其中包括本地的视频和音频播放。苹果公司在其产品上禁用 Flash 后，这一趋势更加明显。而该标准后面成为现在的 HTML5 的标准。 因此，HTML5除其他新的标签外，将 < 详情 »

查看详情

Web 播放 AV1 概述

前言 AV1 是 Google 协同 Netflix, Amazon, Huawei等知名公司所建 AOMedia 联盟推出的一款开放，免费的视频编码格式。而它的直接竞争对手便是目前也非常火热的 HEVC。本文将详细介绍 AV1 的由来和特点，以及如何转码和播放。 发展历史 音视频编解码发展已经有三十余年时间，其实发展的方向也就是两条: 更好的压缩率 更多的播放场景 很早以前我们只能在电视或者 DVD 上看，而现在我们更多的在移动设备或者浏览器上看视频。众所周知，H.264 目前依旧是现在非常主流的编解码方式，它由运动图像专家组开发发布，然而从最早1999年到现在，播放的形式已经千变万化，比如 HDR, 8K ,360° 视频等。为了满足当前的形式发展，H.265 诞生了，在视频压缩上更进一步。然而，不好的事 H.265 需要支付昂贵的专利费用，这是很多厂商无法接受的。 因此一些公司开始尝试别的视频格式，其中 Google VP9, 它是谷歌内部用来代替 H.264 详情 »