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

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

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

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



最新記事
  • Gmailログイン時に「Chrome」が自動ログインしないようにする (10/19)
  • ニコニコ動画に再生速度ボタンを設置するスクリプトを修正しました (10/17)
  • iPhone:変態から「AirDrop痴漢」されないための自衛と対策 (10/15)
  • Windows:標準機能を使ってPCの性能を測定してみる (10/12)
  • Affinity Photo:「アンカーポイント(回転の中心)」を使いこなす (10/10)
  • 管理人より
    2300万アクセス突破しました。ありがとうございます。

    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... 様 - ニコニ・コモンズ









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




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





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

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

    ブログパーツ