h5 video 视频不能正常播放

Question

在页面中用video标签嵌入了一个视频：

<video controls="controls" preload="auto" class="my-player" poster="">
   <source src="" type="video/mp4">
</video>

其中 video 的 poster 属性的值和 source 的 src 的值都是存在 json 数组里动态获取的。
这个页面用ios自带的浏览器和qq直接打开时，视频都能正常播放，但是在微信打开，视频就无法播放。安卓都能正常播放。

以下代码是用于视频播放的：

function audioPlay() {
    var video = document.getElementsByTagName('video')[0];
    console.log(video);
    video.load();    // 在更改来源或其他设置后对音频/视频元素进行更新
    video.addEventListener('touchstart', function() {
        if (!video.palyed) {
            video.play();
        }
    });
}
    

如果把 video.load() 这个语句放在 touchstart 监听事件里面（就是放在 if 语句前面），在微信也能正常播放视频，但是会导致没触摸一次视频区域，视频就重新加载一次，也不能暂停，不利于视频播放的效果。
请问这是什么原因造成的啊？有什么办法能解决吗？

Answer 1

用尽各种网上搜的方法和别人教的来尝试，都没有用。最后自己慢慢摸索，发现必须要有一个动作来触发 video.load() 事件，但是又不能用 video 的动作，所以在 video 上加了一个辅助层，通过点击辅助层触发 video.load() 和 video.play()，然后删掉辅助层这个元素，这样就可以正常播放了，也没有产生其他会影响视频播放的事件。

Answer 2

1. 没有弄明白为什么video.load()
2. 建议都打上日志，然后在fiddle里面看日志自动触发了什么事件导致的
3. 我以前也做过类似的，是没有这样的现象，应该是哪里写的有问题，你可以弄一个demo页面，里面只留下这个，逻辑，然后一部分一部分排除，最后使用一些hack技巧是可以处理的。