Web 开发技术分析，前端开发学习历程。
280 篇文章原文地址 ： 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 详情 »
最近遇到了个平时很少遇到的 Bug，理论上代码压缩混淆后大多数都不会存在问题(之前确实没有遇到)，但是最近却不小心给遇到了。 大概在测试的时候，没有混淆前，代码是可以正确执行的，但是混淆后，代码就出现部分 JS 未顺利执行的情况。然后通过代码一步步调试，发现，在进行混淆的时候，会把一些变量命名转化成类似字幕 a, b, c等这样。然后这次在组件注册的时候，比较偷懒，用了 Function.name 来代表注册组件的名称，而不是独立命名。 自己在 ES6 偷懒这样写了： import PlayComponent from './play-component'; // ... ui.register(PlayComponent); // register 的实现 ui.register = function(func) { const name = func.name; } 这样就导致在压缩的时候的 传入的参数会变成 t 这样就会知道命名失效，始终都是 t 。 所以在实现的时候尽量少用 Function.name 详情 »
我们经常通过事件代理会取到一些元素，大概我们第一个想到的 tagName 来判断，但是这样的确需要写过 map 来判断。我们可以有个快捷的方法： const el = document.querySelector('.svg-inner'); el.ownerSVGElement // true 则表示式 svg 元素 如果 false 则不是 参考: https://stackoverflow.com/questions/20748836/how-do-i-tell-if-a-dom-element-is-html-or-svg#= 详情 »
