このブログのはてなブックマーク数 このエントリーをはてなブックマークに追加

知らなきゃ絶対損するPCマル秘ワザ

知らなくて損したPC情報とかを分かりやすくメモする個人ブログ。
『月,水,金』の週3回更新!(予定)

このブログ内をキーワードで検索することもできます。
Loading



最新記事
  • Windows 10 のバージョン(OSビルド)を調べてみる (12/14)
  • 年末大掃除! アイロンで貼れる障子紙の貼り替えをしてみた (12/12)
  • Stylus:スタイル「Google:ホリデーロゴ置換」を修正しました (12/10)
  • iPhone:Apple純正よりも丈夫な充電ケーブルを買ってみた (12/07)
  • Affinity Photo:「テキスト」や「画像」を中央に配置する (12/05)
  • 管理人より
    2018年の最終更新は12/24(月)
    2019年の初回更新は01/07(月)の予定です。

    HTML だけで動画,オーディオを再生するための基本知識

    このエントリーをはてなブックマークに追加
    イメージ


    こんにちは、さち です。

    以前、音声(オーディオ),動画(ビデオ)を
    このブログに設置したことがありました。

    かなり前の話なので、その時は Flash を使いましたが
    HTML5 が普及した今は、Flash なんていりません。
    HTML だけで設置できます。

    ただ、情報としては知ってはいても
    HTML でオーディオ,動画を設置した経験が一度もありません。
    勉強してみたいと思います。




    オーディオを設置する <audio> タグ

    実際に、<audio> タグを使って設置したプレイヤーがこちら。


    HTML はこんな感じ。
    <audio src="sample.mp3" controls>
    このウェブブラウザは audio タグ未対応です
    </audio>

    CSS はこんな感じ。
    <img> のようにタグに直接「width="450"」と書いても効きません。
    幅を変えるには、CSS として width を指定する必要があります。
    audio {
    width: 450px;
    max-width: 100%;/* スマホ表示でのはみ出し対策 */
    }

    <audio> タグで使用できる主な属性は下記のとおり。
    (ウェブブラウザによって既定値が異なる場合があります)
    表

    各ウェブブラウザの標準プレイヤーのデザインは次のとおり。
    サンプル

    主流コーデックである「MP3」「AAC」は
    どのウェブブラウザでも再生できるので安心して使用できます。




    動画を設置する <video> タグ

    実際に、<video> タグを使って設置したプレイヤーがこちら(音声なし動画です)。


    HTML はこんな感じ。
    <video src="sample.mp4" poster="image.jpg" controls playsinline>
    このウェブブラウザは video タグ未対応です
    </video>

    CSS はこんな感じ。
    「width」「height」片方だけの記述でも、アスペクト比が維持されます。
    <img> のようにタグに直接「width="450"」と書いても効きます。
    video {
    width: 450px;
    max-width: 100%;/* スマホ表示でのはみ出し対策 */
    }

    <video> タグで使用できる主な属性は下記のとおり。
    (ウェブブラウザによって既定値が異なる場合があります)
    「width」「height」はタグに直接記述しなくても、「CSS」から指定できます。
    表

    各ウェブブラウザの標準プレイヤーのデザインは次のとおり。
    サンプル

    主流コーデックである「H.264」は
    どのウェブブラザでも再生できるので安心して使用できます。




    JavaScript での操作

    HTML5 のプレイヤーは JavaScript からも操作ができます。
    JavaScript を使うことでプレイヤーのデザインを自作できるため
    ウェブブラウザ毎の UI の違いを無くしたい場合などに役立ちます。
    (視聴できれば良いだけなら JavaScript での操作は不要です)

    <audio><video> 要素を取得し
    用意されたプロパティ,メソッドを使うことで、様々な操作ができます。
    <video id ="player" src="sample.mp4" controls>
    このウェブブラウザは video タグ未対応です
    </video>

    var player = document.getElementById('player');

    player.play();// 再生する
    player.pause();// 一時停止する
    player.volume = 0.5;// ボリュームを50%にする
    player.playbackRate = 2;// 再生速度を2倍に
    player.loop = true;// ループ再生を有効にする

    他にも色々なことができます。詳細は下記リンク先を参照して下さい。

       → video要素、audio要素をJavaScriptから操作する - HTMLクイックリファレンス


    また、JavaScript の MediaSource.isTypeSupported() を使うことで
    指定した「MIMEタイプ」をウェブブラウザがサポートしているか確認できます。
    (サポートしていれば「true」、していなければ「false」が返ってくる)
    ウェブブラウザの開発ツール(コンソール)で入力すると簡単です。
    var bool = MediaSource.isTypeSupported('video/webm; codecs="vp9"');
    console.log(bool);// true(Firefox 61 の場合)




    以前は、Flash のプレイヤーを使っていたので
    詳しくない人にとってはハードルが高かったのですが
    HTML5 ではすごく簡単になりましたね。
    (プレイヤーを自分で用意しなくて良いのが楽)

    HTML5 なら、PC だけでなくスマートフォンでも再生可能ですし
    今の時代、Flash を使う理由はほとんどないですね。

    記事内で使わせて頂いたオーディオ,動画はこちらです。
    ありがとうございました。

       → FM音源風BGM2【ループ対応】/作者:おとうふ 様 - ニコニ・コモンズ
       → 猫です。(立ち去ります)/作者:ES... 様 - ニコニ・コモンズ









    このエントリーをはてなブックマークに追加




    管理人だけが読めるコメントにする(返信はしません)
    【お知らせ】
    • コメントは承認制です。反映に時間がかかります。
    • スパムコメント防止のため一部ホストを規制中です。
    • URLを含む投稿はできません。必要な場合は最初のhを削って下さい。
    • 記事に直接関係ない個人のトラブルにはお答えできません。
    • Android は使用経験がないので質問を頂いても答えられません。
    • その他詳細はこちら





    記事別の週間アクセス数ランキングです。こちらの記事もぜひ読んでみて下さい。

    2008-2018 知らなきゃ絶対損するPCマル秘ワザ  無断転載禁止

    ブログパーツ