HTML5 によるMP4動画、サウンド挿入 2016/.5 2018/3改
WMV形式動画はスマホに対応しないので注意 （ネット情報）
HTML5では、動画や音楽フォーマットを文書に埋め込むための <video>、<audio> タグが追加された。
この <video>、<audio> タグを使用することで、HTMLから簡単にMP4動画や音楽を扱えるようになった。
ただし、
HTML5での記述
ネットや解説書で提供される動画に関するHTML5記述はいろあるのでいくつか作成した。
下記サンプルはHTML5で作成した音声付MP4動画再生の結果です。
結果まとめ
|
（右）ブラウザ （下）サーバ |
I.E.11 (Windows10) |
I.E.9 (VISTA) |
Android スマホ |
| FC2/ CyberHome |
◎ | ×〜△ 動画コントロール機能一部使えず |
○ Auto動作せず |
| 参考 YouTube投稿 |
◎ | ◎ | ◎ |
サンプルのheader：
HTML5 では ： <!DOCTYPE html> HTML4でも動作OK.
HTML4 では ： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> HTML5でも動作OK
両者区別する必要がなく、HTML4 ,5 ともにどちらを使ってもよいようだ。
HomepageBuilder Ver14でのheaderは上記HTML4の形式だが、Ver21 ではHTML5 になっている。
MP4動画でのコードの種類
http://www.tagindex.com/html5/embed/video.html
実施例
下記 1)〜6) コードサンプルをUPしたサーバーはFC2
1） 基本形 実施例 ishiii5v
<video controls autoplay width="500" height="500"><source
src="valentSound.mp4"></video>
別サーバーに置いて直リンクする場合のコードは、
<video controls autoplay loop><source src="http://**********.mp4"
></video>
文献： https://blog.codecamp.jp/html5_video
2) 実施例 html54b 下記3）に初期画像 valent.jpg を入れた。
<video controls poster="valent.jpg" preload="none"
onclick="this.play();" width="500" height="500">
<source src="valentSound.mp4" type="video/mp4"> </video>
引用元 http://www.tam-tam.co.jp/tipsnote/html_css/post2604.htm
3) 上の 2)で初期静止画面なし。クリックスタート。（ポインタ位置を画面内に置く必要があるようだ）
http://1939abe.web.fc2.com/pc/hp/html5/html5valent2.htm 画面サイズは自由に設定可。
<video controls preload="none" onclick="this.play();"
width="700" height="525">
<source src="ishii1.mp4">
</video>
4） 実施例 html52auto 基本コード3) autoあり。 スマホでは表示しないか静止したまま。 I.E9× I.E.11では表示。
<video src="valentSound.mp4"autoplay> </video>
http://1939abe.web.fc2.com/pc/hp/html5/html5valent3.htm
5） 実施例 html54
下記onclick以後を省略すると、静止画像となる。
<video src="valentSound.mp4" prelord="none" poster=”valent.jpg”
onclick=”this.play();” controls >
<source src="valentSound.mp4″>
</video>
以下サンプルは成績不良
6) 実施例 10days11 (10日でおぼえるHTML5 Lesson11)。
CyberhomeサーバはVISTA（I.E.9）で動作せず。 Win10、スマホは両者OK。
<video controls preload poster="valent.jpg">
<source src="valentSound.mp4">
</video>
7） 実施例 html520 基本コード2） autoなし。右クリックで再生。 スマホ表示せず。 I.E.9/11 では表示。
<video src="valentSound.mp4">
</video>
8） 実施例 html53 基本コード4）。 prelord="none"挿入。 スマホ表示せず。 I.E.9/11 では表示。
（ポインタ位置を画面内に置く必要があるようだ）
<video src="valentSound.mp4"autoplay prelord="none">
</video>
ブラウザ、サーバーの対応
上記 1)〜8) サンプルをUPしたサーバーはFC2 だが、MP4をHTML5で編集する場合、うまく動作するか否かは
IE9か、IE11か、のブラウザVersion ばかりでなく 使用するサーバーによって異なる。
フリーのFC2もＯＫだがファイル容量＜1ＭＢ の制約あり、 動画への使用は他サイトへMP4を置いて直リンクする必要があるだろう
結論として、
私の場合、HTML5の<video>コードを使うか、あるいは、YouTubeに投稿して、そのURLを編集して、コントロールバーのみならず、
「YouTube」の大文字も消す方法が一番よさそうです。（2018/2）
スマホ用変換ソフト：
MP4 をスマホに対応するには下記のようなスマホ用変換ソフトが必要か？
http://www.anvsoft.jp/any-video-converter-free.php
サウンド
HTML5では<audio> タグが追加された。
FC2/Cyberhomeで Win10(IE11)：○ VISTA(IE9)：○ FC2で Androidスマホ：× （詳細未検討）
・ html5AudioAuto.htm ）
<audio src="sound.mp3"autoplay>
</audio>
,mid 形式は動作せず。
サウンドに関する従来の HTML4解説は → こちら
解説 html5 リファレンス
http://q.hatena.ne.jp/1367246801
http://webfeelfree.com/html5-video-basis/
http://www.htmq.com/html5/001.shtml
https://developer.mozilla.org/ja/docs/Web/HTML/Supported_media_formats
スマホでもPCでも、どのブラウザーでも再生できる動画の埋め込み法：
javaScript .js やcss により、HTML5に対応しているブラウザとそうでないブラウザを
振り分けて、 ユーザー環境に合わせた異なるファイルが再生されるようにする。
http://digitalnomori.hatenablog.jp/entry/2014/03/15/184004
http://se-suganuma.blogspot.jp/2011/12/html5-or-flashjavascript.html
http://okwave.jp/qa/q1395440.html
サイトでみつけた例
http://videojs.com/