モバイル環境のsafariやchromeでバックグラウンドから復帰した動画の自動再生を再開させる

前提・実現したいこと

モバイル環境のvideoタグで、
画面がフォーカスしている間は動画を常に自動再生させたい。

発生している問題・エラーメッセージ

ios safari環境でvideoタグで動画を自動再生させている時に、一旦、home画面に戻り、もう一度そのページを表示させると動画がストップした状態になってしまいます。

エラーメッセージ

該当のソースコード

html
1<video id="video" muted webkit-playsinline playsinline loop autoplay preload="auto" class="routingByBreakpoint">
2	<source data-src="img/mov/a.mp4" type="video/mp4" data-query="pc"></source>
3	<source data-src="img/mov/a.webm"  type="video/webm" data-query="pc"></source>
4	<source data-src="img/mov/sp_a.mp4" type="video/mp4" data-query="mobile"></source>
5	<source data-src="img/mov/sp_a.webm" type="video/webm" data-query="mobile"></source>
6</video>

jacascript
1<script type="text/javascript">
2var defaultQueryList = {
3    mobile: matchMedia("(max-width: 768px)"),
4    pc: matchMedia("(min-width: 769px)")
5}
6
7function routingByBreakpoint(sourceList) {
8    for(var i = 0, l = sourceList.length; i < l; i++){
9        var source = sourceList[i];
10
11        if(!(source.dataset.query && defaultQueryList[source.dataset.query] && source.dataset.src)) continue;
12        if(!(defaultQueryList[source.dataset.query].matches)) continue;
13
14        var newSource = document.createElement("source");
15        newSource.src = source.dataset.src;
16
17        source.parentElement.appendChild(newSource);
18    }
19}
20
21(function (){
22    var elemList = document.getElementsByClassName("routingByBreakpoint");
23
24    for(var i = 0, l = elemList.length; i < l; i++){
25        var sourceList = elemList[i].getElementsByTagName("source");
26
27        routingByBreakpoint(sourceList);
28    }
29
30})();
31
32window.addEventListener('DOMContentLoaded', function(){
33  document.addEventListener("visibilitychange", function() {
34var vst = document.visibilityState;
35if(vst == 'visible'){
36     video.play();
37	}
38  });
39});
40
41</script>