查看详情
这一篇主要分析一些辅助类函数的代码实现，扩展一些对 buffer 操作，web worker 等内容的学习。 performance 在 playlist-loader.js 中我们可以看到这行代码 stats.tload = performance.now(); performance 提供了一个高精度的时间访问 API。它能够查看到 Navigation Timing，Resource Timing这些准确的时间结果。 Navigation Timing API能够帮助网站开发者检测真实用户数据（RUM），例如带宽、延迟或主页的整体页面加载时间。 其中 performance.now()可以得到距离页面开始请求到现在相差的毫秒数。 web worker Web worker, Javascript是单线程的，所以如果页面中的Javascript有大量计算的话，很容易阻塞页面的动画或者交互响应。HTML5中的Web Worker就使Javascript的多线程编程成为可能。 在 demux/demuxer.js 中我们可以看到这么一段代码: import work from 'webworkify-webpack'; //... const vendor = navigator.vendor; 详情 »
查看详情
上一篇 我们分析了 hls.js 的基本目录架构和代码执行流程，这一篇将主要分析 主链路实现代码的分析。 源码分析会点出核心的调用流程，其中一些不常用的方法或者比较容易理解的不做详细的注释。 hls.js 是模块打包的入口 import URLToolkit from 'url-toolkit'; import Event from './events'; import {ErrorTypes, ErrorDetails} from './errors'; import PlaylistLoader from './loader/playlist-loader'; import FragmentLoader from './loader/fragment-loader'; import KeyLoader from './loader/key-loader'; import StreamController from './controller/stream-controller'; import LevelController from './controller/ 详情 »
原文地址 ： http://blog.csdn.net/x_iya/article/details/52495824 @ N3verL4nd 视频 视频的播放过程可以简单理解为一帧一帧的画面按照时间顺序呈现出来的过程，就像在一个本子的每一页画上画，然后快速翻动的感觉。 image 但是在实际应用中，并不是每一帧都是完整的画面，因为如果每一帧画面都是完整的图片，那么一个视频的体积就会很大，这样对于网络传输或者视频数据存储来说成本太高，所以通常会对视频流中的一部分画面进行压缩（编码）处理。由于压缩处理的方式不同，视频中的画面帧就分为了不同的类别，其中包括：I 帧、P 帧、B 帧。 I、P、B 帧 I 帧、P 帧、B 帧的区别在于： I 帧（Intra coded frames）：I 帧图像采用帧内编码方式，即只利用了单帧图像内的空间相关性，而没有利用时间相关性。I 帧使用帧内压缩，不使用运动补偿，由于 详情 »
查看详情
书的内容不多，也就190多页的样子。这是一本偏项目管理书籍,没有涉及多么技术细节的地方。 实际上现在项目开发都离不开科学，科学的技术实现，以及科学的项目管理。 项目管理一定是有序的推进的，合理的组织，合理的需求计划，确保小版本迭代，确保最小可完成性，注重测试跟进。其实大家看了很多软件项目管理的书籍，大同小异，最终还是要落到管理者手中。他们如何确保一个项目健康的发展，才能更好的推进项目朝着合理的方向前进。 其实于每个开发者而言，也真的非常有必要读一读。因为我们作为参与者的一员，我们需要去理解每个单元目标，对于不合理的需求和组织调配，我们需要有自己的想法。敏捷开发说白了，就是让目标足够系列化，我们将目标细分到一个可预期的时间完成。小目标也有利于测试更近，防止超出预期的缺陷产生。 事实有的时候过多测试并不是意见坏事情， TDD会让开发者可产生的缺陷趋于非常小的数值，事实有过项目开发的经验，我们会发现后期进行密集功能性测试，爆出来的 bug 所给人的数量级是完全不可预估，最终造成项目时间的延迟。测试一定是便随着我们开发的，它永远不是独立于我们开发之外的。 最后给出： ⭐️⭐️⭐️⭐️⭐️ 推荐。 详情 »
查看详情
hls.js 是一款基于 Media Source Extensions 开发的，用于实现 HTTP Live Streaming 开源JavaScript类库。它可以实现将MPEG-2 和 AAC/MP3码流变成自制的 MP4的分片。并且可以直接绑定在Video 上，实现播放。 文章主要是通过解读源码，希望读者可以了解实现基本的前端 HLS 的主要流程，同事也可以扩展读者对 Media Source Extensions 和 video api 以及 视频编解码的相关知识有更进一部的了解。 第一篇文章可能会从整体方面，让大家理解一下调用的 整体流程，让大家对真个项目的基本代码架构有个基础的认识。 目录指南 只对和项目相关的文件进行说明 dist // 打包后的文件目录， src + cotroler - abr-controller.js // 用于分片筛选 - audio-stream-controller.js - audio-track-controller.js - buffer-controler.js 详情 »
查看详情
我们现在已经非常习惯使用 Webpack 进行 JS 模块的打包处理。当然有的时候我们在优化代码的时候需要对所引用的模块进行体积分析，从而进行代码优化。当然这些工具有很多了，今天主要说下 webpack-visualizer。 webpack-visualizer 是一款 webpack模块分析插件，使用非常简单，你只需要： npm install webpack-visualizer-plugin --save-dev 然后编辑你的 webpack 配置文件： var Visualizer = require('webpack-visualizer-plugin'); //... plugins: [new Visualizer({ filename: './statistics.html' })], //... 然后打包的时候会在 打包目录下生产一个静态网页 statistics.html.打开你就可以看到各个模块的百分比，以及压缩包大小了。 详情 »
查看详情
尽管现在很多大多数现代浏览器对 CSS3 的诸多特性已经开始支持了，但是有的时候我们还是避免不了对低版本的 IE 浏览器进行兼容性的样式写法。常见的思路无疑是写注释性语法: <head> <!--[if gt IE 9]><!--> <style> // your style rule </style> <!--<![endif]--> </head> 关于IE 注释性语句可以看 这里 当然你也可以通过 JS 进行 UA 测判断，然后在 body 加上 ie的 class ，然后在样式里进行限制。 .ie .container{ .... } 当然今天得重点是通过 media 详情 »
查看详情
解决新版本 Chrome 提示 DOMException: The play() request was interrupted 解决新版本 Chrome 提示 DOMException: The play() request was interrupted 大概在一些新版本的浏览器中，我们是用 audio 或者 video 进行媒体资源播放的时候，可能会在控制台看到这个输出: Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause(). Or Uncaught (in promise) DOMException: The play() request was interrupted by a new load request. 如何触发？ < 详情 »
查看详情
我们知道在 video 的标签中支持 preload的属性， 它表示可以 用于定义视频对于媒体资源的预加载从而达到更好的播放体验。它可以设置下面属性值： auto 表示整个视频都会进行下载，即使用户并不打算播放它。 metadata 只请求视频信息的 metadata 数据，比如长度。 none 不停止视频资源预加载。 测试表现 Chrome *版本： 61 * 我们测试Chrome设置为 auto 的时候加载数据大约为 (3.6M / 20.1M) Preload Size auto 3.6M / 20.1M none 0 M / 20.1 M metadata 896 KB / 20.1 M Safari 版本： 11.0 Preload Size auto 20.1M 详情 »
查看详情
前些天 Apple 正式向用户推送了他们的新一代 Mac OS MacOS High Sierra 。这次带来了新的 Safari 浏览器，然而一个不好的消息，是 safari 重新制定了新的限播策略。点击这里 了解上个版本的播放限制策略调整。 现在网页用包含 video 或者 audio 的标签，如果涉及了 autoplay 属性，浏览器现在不再进行自动播放，而用户需要在 url 的状态栏进行设置（右击就好）： 里面会有三个选项： 允许自动播放 永不自动播放 停止播放含有声音的媒体 官方也给了建议，你可以通过代码来监听是否自动播放： var promise = document.querySelector('video').play(); if (promise !== undefined) { promise.catch(error => { // Auto-play was prevented // Show a UI element 详情 »
