HTML5 による動画、サウンド挿入  2016.5       yahoo

HTML5では、動画や音楽フォーマットを文書に埋め込むための <video>、<audio> タグが追加された。
この <video>、<audio> タグを使用することで、HTMLから簡単にMP4動画や音楽を扱えるようになった。
ただし、


HTML5での記述
ネットや解説書で提供される動画に関するHTML5記述はいろあるのでいくつか作成した。
下記サンプルはHTML5で作成した音声付MP4動画再生の結果です。

結果まとめ

(右)ブラウザ

(下)サーバ
 I.E.11
(Windows10)
  I.E.9
(VISTA)
 Android
スマホ
 Yahoo/FC2  ◎  ×〜△
動画コントロール機能一部使えず

Auto動作せず 
 CyberHome※)  ◎ ×
コントロールバー
表示せず
スタートできず 
× 
 参考
YouTube投稿
 ◎  ◎  ◎

※)同社見解: 弊社サーバについては動画再生に対応しておりません。

サンプルのheader:
   <!DOCTYPE html> のみ。 HTML4でも動作OK.
HTML4 では :
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html lang="ja"> HTML5にあっても動作OK。
HomepageBuilder14ではheaderは上記HTML4になるが本文がコード編集でHTML5にすれば動作OK。エラー表示なし。
  念のためheaderは<!DOCTYPE html>にしておく。

下記 1)〜6) コードサンプルをUPしたサーバーはFC2(Yahooもテスト)
1)html54b  引用:※) 
  <video controls poster="valent.jpg" preload="none" onclick="this.play();" width="500" height="500">
  <source src="valentSound.mp4" type="video/mp4">
  </video>

下記★2)に初期画像 valent.jpg を入れた。
 http://1st.geocities.jp/betower6/html5/html5ishi.htm

※)引用元 http://www.tam-tam.co.jp/tipsnote/html_css/post2604.htm

2) 上の 1)で初期静止画面なし。クリックスタート。 石井さんの謹賀新年で使用。
http://1st.geocities.jp/betower6/html5/html5ishi2.htm
 画面サイズは自由に設定可。
 <video controls preload="none" onclick="this.play();" width="700" height="525">
 <source src="ishii1.mp4">
 </video>

3)html52auto  基本コード2) autoあり。 スマホでは表示しないか静止したまま。 I.E9× I.E.11では表示。
  <video src="valentSound.mp4"autoplay>
  </video>

 石井さんの謹賀新年で使用。
  http://1st.geocities.jp/betower6/html5/html5ishi3.htm

4)html54  
  下記onclick以後を省略すると、静止画像となる。
 <video src="valentSound.mp4" prelord="none" poster=”valent.jpg” onclick=”this.play();” controls >
 <source src="valentSound.mp4″>
 </video>

5) 10days11 (10日でおぼえるHTML5 Lesson11)
 CyberhomeサーバはVISTA(I.E.9)で動作せず。 Win10、スマホは両者OK。
<video controls preload poster="valent.jpg">
<source src="valentSound.mp4">
</video>


以下サンプルは成績不良
6)html520  基本コード1) autoなし。右クリックで再生。 スマホ表示せず。 I.E.9/11 では表示。
 <video src="valentSound.mp4">
 </video>

7)html53  基本コード3)。 prelord="none"挿入。 スマホ表示せず。 I.E.9/11 では表示。
  <video src="valentSound.mp4"autoplay prelord="none">
  </video>

・下記コードは画像表示せず。 文法ミスだろう。
 <video>
 <source src="valentSound.mp4″>
 </video>


ブラウザ、サーバーの対応
上記 1)〜6) サンプルをUPしたサーバーはYahooだが、MP4をHTML5で編集する場合、うまく動作するか否かは
・IE9か、IE11か、のブラウザVersion ばかりでなく
 使用するサーバーによって異なる。私のサーバー:Cyberhome(マンション共同加入の東電系プロバイダ)
 はHTML5への対応が不十分。
フリーのFC2もOKだがファイル容量<1MB の制約あり、。動画への使用は無理だろう

以下はCyberhome へUPした例
htn54b
http://www.ab.cyberhome.ne.jp/~take-abe/html5/html54b.htm

10days 
http://www.ab.cyberhome.ne.jp/~take-abe/html5/10days11.htm

この「10days」を Yahoo サーバにupすると
http://1st.geocities.jp/kyokuyu/pc/hp/html5/10days11.htm

 (参考) YouTube投稿

結果
   CyberhomeサーバはVISTA(I.E9)で動作せず。 Win10、スマホは両者OK。

******************************************
結論として
私の場合、HTML5など使わず、YouTubeに投稿して、そのURLを編集して、コントロールバーのみならず、
YouTube」の大文字も消す方法が一番よさそうです。





スマホ用変換ソフト:
MP4 をスマホに対応するには下記のようなスマホ用変換ソフトが必要か?
  http://www.anvsoft.jp/any-video-converter-free.php

サウンド
 HTML5では<audio> タグが追加された。
 FC2/Cyberhome/Yahooで   Win10(IE11):○  VISTA(IE9):○      FC2/Yahooで 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/


  | HTML4の<embed>を使ったM P4埋め込み  |  ホームページ作成体験  |











inserted by FC2 system