-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
26 lines (21 loc) · 11.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html><html lang="zh-CN"><head><meta name="generator" content="Hexo 3.9.0"><meta charset="utf-8"><meta name="X-UA-Compatible" content="IE=edge"><meta name="author" content="Virigl,[email protected]"><title>Virgil Chan</title><meta name="description" content="A Blog Powered By Hexo"><meta name="keywords" content="HTML,CSS,JavaScript,Vue,AngularJS,WebPack,UnderScore,System,Raspberry,Tool,Linux,WordPress,NodeJS,MongoDB,Git,Python"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta name="renderer" content="webkit"><link rel="short icon" href="/images/favicon.png" type="image/x-icon"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/blog_basic.css"><link rel="stylesheet" href="/css/font-awesome.min.css"><link rel="alternate" type="application/atom+xml" title="ATOM 1.0" href="/atom.xml"><link rel="manifest" href="/manifest.json"></head><body><div class="sidebar animated fadeInDown"><div class="logo-title"><div class="title"><img src="/images/favicon.png" style="width:127px;"><h3 title><a href="/">Virgil Chan</a></h3><div class="description"><p>间歇性凌云壮志，持续性混吃等死</p></div></div></div><ul class="social-links"><li><a href="http://www.feed43.com/6708067855351261.xml"><i class="fa fa-rss"></i></a></li><li><a href="http://weibo.com/1953548815"><i class="fa fa-weibo"></i></a></li><li><a href="http://github.com/pansy-cx"><i class="fa fa-github"></i></a></li></ul><div class="footer"><a target="_blank" href="/"><span>Theme by </span></a><a href="https://www.caicai.me"> CaiCai </a><span>&</span><a href="https://github.com/Ben02/hexo-theme-Anatole"> Ben</a><div class="by_farbox"><a href="https://hexo.io/zh-cn/" target="_blank">Proudly published with Hexo！</a></div></div></div><div class="main"><div class="page-top animated fadeInDown"><div class="nav"><li><a class="current" href="/">首页</a></li><li><a href="/about">关于</a></li><li><a href="/archives">归档</a></li></div><div class="information"><div class="back_btn"><li><a class="fa fa-chevron-left" onclick="window.history.go(-1)" style="display:none;"> </a></li></div><div class="avatar"><img src="/images/favicon.png"></div></div></div><div class="autopagerize_page_element"><div class="content"><div class="post animated fadeInDown"><div class="post-title"><h3><a href="/2021/02/22/hlsjs-source-code-1/">HLS 源码分析（1）</a></h3></div><div class="post-content"><p>这篇文章梳理一下 hls.js 播放 m3u8 文件的主流程。
首先，hls 先请求 m3u8文件，获取到每个切片的地址，然后按顺序请求这些 ts，解析出 ts 当中的音视频资源，使用 Media Source Extensions 将 buffer 内容进行合流，组成一个可播的媒体资源文件。
Media Sou...</p></div><div class="post-footer"><div class="meta"><div class="info"><i class="fa fa-sun-o"></i><span class="date">2021-02-22</span><i class="fa fa-tag"></i><a class="tag" href="/tags/HLS/" title="HLS">HLS </a></div></div></div></div><div class="post animated fadeInDown"><div class="post-title"><h3><a href="/2021/02/19/hls-protocol-analysis/">HLS 协议详解</a></h3></div><div class="post-content"><p>工作原理
WIKI 解释：
HTTP Live Streaming，缩写为HLS，是由苹果公司提出基于HTTP的流媒体网络传输协议。是苹果公司QuickTime X和iPhone软件系统的一部分。它的工作原理是把整个流分成一个个小的基于HTTP的文件来下载，每次只下载一些。当媒体流正在播放时，客户端可以选择从许多...</p></div><div class="post-footer"><div class="meta"><div class="info"><i class="fa fa-sun-o"></i><span class="date">2021-02-19</span><i class="fa fa-tag"></i><a class="tag" href="/tags/HLS/" title="HLS">HLS </a></div></div></div></div><div class="post animated fadeInDown"><div class="post-title"><h3><a href="/2019/10/14/react-native-principle-02/">Native 与 RN 通信原理</a></h3></div><div class="post-content"><p>RN 调用 Native自定义原生模块Native 提供了一系列的 API 供 RN 使用。拿个简单的 API 举例：Alert，RN 调用 Alert.alert()，弹出原生提示框。看一下 Alert 的源码，在 react-native/Libraries/Alert/Alert.js。
123456789...</p></div><div class="post-footer"><div class="meta"><div class="info"><i class="fa fa-sun-o"></i><span class="date">2019-10-14</span><i class="fa fa-tag"></i><a class="tag" href="/tags/iOS/" title="iOS">iOS </a><a class="tag" href="/tags/React-Native/" title="React-Native">React-Native </a></div></div></div></div><div class="post animated fadeInDown"><div class="post-title"><h3><a href="/2019/10/12/react-native-principle-01/">ReactNative 运行原理</a></h3></div><div class="post-content"><p>之前在研究 RN -> Web 的时候，发现我对 RN 的理解还不够清晰，所以拿源码翻了一下，记录一下心得。
RN 版本：0.60.5
原理我们前端写的 React 会被转换成 JS 语法，打成一个 JSBundle 包，在 App 内被加载和执行，通过 Bridge 将指令发送给 Native 执行。Br...</p></div><div class="post-footer"><div class="meta"><div class="info"><i class="fa fa-sun-o"></i><span class="date">2019-10-12</span><i class="fa fa-tag"></i><a class="tag" href="/tags/iOS/" title="iOS">iOS </a><a class="tag" href="/tags/React-Native/" title="React-Native">React-Native </a></div></div></div></div><div class="post animated fadeInDown"><div class="post-title"><h3><a href="/2019/07/11/iOS-SDK-configure/">iOS SDK 新手搭建指南</a></h3></div><div class="post-content"><p>虽然之前没学过 iOS，但项目需要也做了近半年，总结一下这半年踩过的坑。本篇主要记录开发 SDK 所需要的一些设置，比较基础琐碎。
开发前准备1. 开发工具开发工具自然是 Xcode，JetBrains 也推出了一款代替品 AppCode，但我建议新手还是先熟悉了 Xcode 在选择 AppCode。Xcode官...</p></div><div class="post-footer"><div class="meta"><div class="info"><i class="fa fa-sun-o"></i><span class="date">2019-07-11</span><i class="fa fa-tag"></i><a class="tag" href="/tags/iOS/" title="iOS">iOS </a></div></div></div></div><div class="post animated fadeInDown"><div class="post-title"><h3><a href="/2019/03/09/wechat-custom-qa/">微信开发过程常见问题总结</a></h3></div><div class="post-content"><p>Q：小程序鉴权机制？
wx.getSetting 获取当前用户授权状态。
wx.authorize 提前向用户获取授权权限。
wx.login 获取登陆信息（code），后台通过 code 请求微信登陆凭证校验接口，拿到 openId 和 sessionkey(用于校验)。
wx.getUserInfo 获...</p></div><div class="post-footer"><div class="meta"><div class="info"><i class="fa fa-sun-o"></i><span class="date">2019-03-09</span><i class="fa fa-tag"></i><a class="tag" href="/tags/JavaScript/" title="JavaScript">JavaScript </a><a class="tag" href="/tags/微信/" title="微信">微信 </a></div></div></div></div><div class="post animated fadeInDown"><div class="post-title"><h3><a href="/2019/02/13/ios-wkwebview-cookie/">iOS 浏览器和 WKWebView 跨域 Cookie 的问题</a></h3></div><div class="post-content"><p>问题：今天遇到了一个问题，一个跨域的请求，在 WKWebView 下始终获取不到 Cookie。然后我在浏览器里试了一下， Chrome 能带上 Cookie，而 Safari 拿不到 Cookie。
如图所示，第一个请求，后台种了 Cookie
发起第二个请求时，Cookie 丢失
原因：原因是 Safar...</p></div><div class="post-footer"><div class="meta"><div class="info"><i class="fa fa-sun-o"></i><span class="date">2019-02-13</span><i class="fa fa-tag"></i><a class="tag" href="/tags/iOS/" title="iOS">iOS </a><a class="tag" href="/tags/WKWebView/" title="WKWebView">WKWebView </a></div></div></div></div><div class="post animated fadeInDown"><div class="post-title"><h3><a href="/2018/06/27/machine-optimization/">《集体编程智慧》—— 5.优化</a></h3></div><div class="post-content"><p>本章讲的是如何使用一系列被称为随机优化的技术来解决协作类问题。比如本书中例子：一个家庭成员在不同地方的家庭要到纽约聚会，如何安排航班行程，使得费用与等待时间最少。
成本计算要想安排行程，首先要明确有哪些变量控制着行程成本，本书中给出了机票价格，时间两个变量。所有家庭成员要等到所有人到齐后才走，回去时也是要同时到达...</p></div><div class="post-footer"><div class="meta"><div class="info"><i class="fa fa-sun-o"></i><span class="date">2018-06-27</span><i class="fa fa-tag"></i><a class="tag" href="/tags/Python/" title="Python">Python </a><a class="tag" href="/tags/机器学习/" title="机器学习">机器学习 </a></div></div></div></div><div class="post animated fadeInDown"><div class="post-title"><h3><a href="/2018/06/10/searching-and-ranking/">《集体编程智慧》—— 4.搜索与排名</a></h3></div><div class="post-content"><p>以下代码完整步骤在 Github 上可看
介绍《集体编程智慧》是一本介绍机器学习与计算统计的书，相当硬核，实际编程占了很大的篇幅。书里专门讲述如何挖掘和分析 Web 上的数据和资源，如何分析和获得更好的用户体验。包括协作过滤技术（实现关联产品推荐功能）、集群数据分析（在大规模数据集中发掘相似的数据子集）、搜索引擎...</p></div><div class="post-footer"><div class="meta"><div class="info"><i class="fa fa-sun-o"></i><span class="date">2018-06-10</span><i class="fa fa-tag"></i><a class="tag" href="/tags/Python/" title="Python">Python </a><a class="tag" href="/tags/机器学习/" title="机器学习">机器学习 </a></div></div></div></div><div class="post animated fadeInDown"><div class="post-title"><h3><a href="/2018/05/13/npm-customize-and-httpservice/">自定义 npm 和使用 json-server 进行前端 mock 数据</a></h3></div><div class="post-content"><p>本文章来源于昨天看了公司的一个 npm 工具，其中一个功能是自定义 mock 数据，于是依葫芦画瓢自己也跟着写了个一个。
自定义 npm可执行脚本平常我们都知道 JavaScript 是运行在浏览器环境的脚本语言，不过 JS 同时也和 Python 等语言一样可以运行在命令行环境等任意环境。写一个可执行脚本：
1...</p></div><div class="post-footer"><div class="meta"><div class="info"><i class="fa fa-sun-o"></i><span class="date">2018-05-13</span><i class="fa fa-tag"></i><a class="tag" href="/tags/JavaScript/" title="JavaScript">JavaScript </a><a class="tag" href="/tags/npm/" title="npm">npm </a></div></div></div></div><div class="pagination"><ul class="clearfix"><li class="next pagbuttons"><a class="btn" role="navigation" href="/page/2/">下一页</a></li></ul></div></div></div></div><script src="/js/jquery.js"></script><script src="/js/jquery-migrate-1.2.1.min.js"></script><script src="/js/jquery.appear.js"></script><script>'use strict';'serviceWorker'in navigator&&navigator.serviceWorker.register('service-worker.js').then(function(a){a.onupdatefound=function(){var b=a.installing;b.onstatechange=function(){switch(b.state){case'installed':navigator.serviceWorker.controller?console.log('New or updated content is available.'):console.log('Content is now available offline!');break;case'redundant':console.error('The installing service worker became redundant.');}}}}).catch(function(a){console.error('Error during service worker registration:',a)});
</script></body></html>