2017年06月01日

もっと気になったこと…

 テレビで最近、高速道路リニューアルのCMがやたらと流れています。

高速道路リニューアルCM.jpg

 変なお辞儀が気になったで記事にしようと思ったのですが、今回はそれよりも私にとってはもっと気になったことがあります。

 この動画再生部分のソースです。確認してみました。

<video onClick="this.play()" preload="none" width="620" height="349" poster="mov/cm_01.png" src="mov/cm_01.mp4" controls><p>動画を再生するにはvideoタグをサポートしたブラウザが必要です。</p></video></div>


 すっきりですね。前にもHTML5での動画再生のソースは話題にしたことがありますが、なかなか暗記できません。
 さて、もっと余分な部分をそぎ落とせばこうなります。

<video width="620" height="349" poster="mov/cm_01.png" src="mov/cm_01.mp4" controls><p>動画を再生するにはvideoタグをサポートしたブラウザが必要です。</p></video></div>


 ブラウザが対応していない場合に備えて、こんな再生もできるようにしてあります。

<video controls autoplay type="video/mp4" width="640" height="360">

<source src="mov/cm_01.mp4" type="video/mp4">

<embed src="mov/cm_01.mp4" width="640" height="360" type="video/mp4" autoplay="true" controller="true" pluginspage="http://www.apple.com/jp/quicktime/download/">

</video>



 いずれにせよ、HTML5ではこんなに簡単に動画再生のHTMLを書けるのです。
mov/cm_01.mp4

http://www.e-nexco.co.jp/renewal/h29gaikan/mov/cm_01.mp4
と書き換えて、このブログに埋め込んでみます。
 また、ウインドウのサイズもブログに合わせて小さくします。
<video width="400" height="280" poster="mov/cm_01.png" src="http://www.e-nexco.co.jp/renewal/h29gaikan/mov/cm_01.mp4" controls><p>動画を再生するにはvideoタグをサポートしたブラウザが必要です。</p></video></div>


 その結果。

 もう一方。
<video controls autoplay type="video/mp4" width="400" height="280">

<source src="http://www.e-nexco.co.jp/renewal/h29gaikan/mov/cm_01.mp4" type="video/mp4">

<embed src="http://www.e-nexco.co.jp/renewal/h29gaikan/mov/cm_01.mp4" width="400" height="280" type="video/mp4" autoplay="true" controller="true" pluginspage="http://www.apple.com/jp/quicktime/download/">

</video>


その結果。

 これは勝手に再生がスタートしてしまうようです。

 リンク先の動画が見られなくなってしまった場合に備えて、ブログのローカルソースをリンクしておきます。
標準のブラウザ表示。


もう一方。

タグ:動画
posted by kewpie at 09:51| Comment(0) | TrackBack(0) | HTML5
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/179918632
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
コメントの投稿について
○お名前とコメント欄の記入は必須です。
○メールアドレスは任意です。記入されても公開はされません。管理人のみに知らされます。
○スパム防止のため、
・ホームページアドレス欄への記入はできません。
・コメント欄にURLは記入できません。
・スパムと思われる語を記入できません。
 これらをしようとすると、最終的に投稿完了できません。
○投稿完了後に、管理人の判断でスパムと判断した投稿は削除させていただきます。