Safari HTML5 Feature

iOS 设备上 HTML5 的一些 feature

iOS 设备上音频无法自动播放：Safari developer

Vue.Js 的 click 也无法让音频播放：Vue.js nextTick issues

主要原因是：

iOS requires user input for showing keyboard. Before Vue uses micro task so user click counts as a valid trigger for keyboard. However, in 2.5 we uses macro task so iOS no longer treats it as trigger.

这个 feature 目前导致的问题：

1. 使用 Vue.js 的 click 事件无法让一个 input / textarea 的状态变成 focus
2. 使用 Vue.js 的 click 事件无法让一个媒体资源开始播放

focus 解决方法：

// 使用原生 Js 来监听 button 的 click 事件，让可输入区域 focus
hackFocus ({ source, target, event, statement }) {
  if (!(source instanceof Element) || !(target instanceof Element) || !statement) {
    return
  }   
  source.addEventListener(event, function () {
    target.style.display = 'block'
    target.focus()
  })
}

遗漏问题：

1. 如果触发可输入区域 focus 的 button 只有一个，那么这种实现方案还是可以接受的
2. 如果有多个 button，并且这些 button 是动态追加到 DOM 中的（翻页），那就很复杂了
   1. 首先它会导致代码难以维护，点击不同 button 它触发的事件参数都是不同的，statement 也是不同的
   2. 所以目前想到的方法是使用事件委托，并且使用HTML原生的 data-xxx 属性来做 statement

// 这里简单的用 commentAble 代替 statement
if (commentAble) {
  const input = document.getElementById('comment');
  [].forEach.call(document.querySelectorAll('.comments-wrap'), (wrap) => {
    wrap.addEventListener('click', (e) => {
      if (/(reply-btn|ic-comment)/.test(e.target.className)) {
        window.__drawer_pos = window.scrollY // 记录focus前窗口的距离顶部的高度
        input.style.display = 'block'
        input.focus()
      }
    })
  })
}

media 解决方案：

1. 不要使用 Vue.js，使用原生的方案

// 绑定原生事件
[].forEach.call(document.querySelectorAll('.audio-item'), item => {
  item.addEventListener('click', () => {
    // 调用 vue 的 method 处理 state 并播放
    this.playing()
  })
});

遗留问题：

1. 页面复杂后代码很难维护，特别是要支持 SSR 并且要支持 App 内调用另一种播放策略时
2. [TODO]如何自动播放下一首？