NetCommonsでmp4動画を再生する場合，ファイルの挿入でmp4動画をアップロードした後，table要素の中にHTML編集画面で下のようなコードを挿入すればよい。
<video src="./?action=common_download_main&upload_id=101" loop="true" autoplay="true" muted="true" />
| 上のコードで挿入した左の動画は，IE11，GoogleChromeでは再生されるが，iPadのSafari，iPhoneのSafariでは再生されない。 |
しかし，これではiOSのSafariでは再生されないことがわかった。srcを"http://www.yas-s.com/test.mp4"のようなダイレクトリンクにするとSafariでも動画が再生される。また，Youtubeにアップロードしたファイルのダイレクトリンクであれば再生されるようである。しかし，GoogleDrive，OneDrive，NetCommonsにアップロードしたファイルは再生されない。JavaScriptでvideo要素を操作しても再生できなかった。
１週間ほどいろいろ試行錯誤した結果，JavaScriptでBlobでダウンロードしてから，URL.createObjectURLでsrcに渡せば動作することが分かった。下がそのコードだが，fetch関数にIE11が対応しておらず，実行できない。全体を<script></script>で囲むとIE11で止まってしまう。対応していない関数を無視させる方法が分からなかったので，<script>で小分けに囲んで，IE11が未対応の関数で止まらないようにしてみた。
iPhoneでは，さらに，videoタグにplaysinline="true"を挿入する必要がある。（コードでvideoElement.playsinline=true;としても動作しなかった。）
スマートフォンのモバイル表示でも動画を再生するためには，ヘッダー領域ではなく，各記事にBlobダウンロード・src設定部分のscriptを配置する必要がある。PCのみを対象とするなら，scriptはヘッダー領域に１つあればよい。
なお，このコードはX-UA-CompatibleでIE9互換モードにしていても動作する。
<video id="video1" playsinline="true" />
<script>
function ie(videoElement,url) {
videoElement.src=url;
videoElement.play();
}
</script>
<script>
function other(videoElement,url) {
fetch(url).then(response => {
return response.blob();
}).then(blob => {
videoElement.addEventListener(
videoElement.play();
});
videoElement.src = URL.createObjectURL(blob);
});
}
</script>
<script>
function videoInit(id,url) {
var videoElement=document.getElementById(id);
videoElement.loop=true;
videoElement.muted=true;
var userAgent=window.navigator.userAgent.toLowerCase();
if (userAgent.indexOf(
ie(videoElement,url);
}else{
other(videoElement,url);
}
}
</script>
<script>
videoInit("video1","./?action=common_download_main&upload_id=101");
</script>
| 左の動画は，IE11，GoogleChrome，iPadのSafari，iPhoneのSafariのいずれでも自動的に再生され，ループするはずである。 |
参考にしたページ
・
モバイルブラウザのビデオ再生がいろいろ変わるので確かめてみた・
使用してるブラウザを判定したい
検索
VB.NET Tips
3Dプリンター
