1. HTML5ビデオタグビデオ
HTML 5<video>ビデオ タグは、ogg / mpeg 4 (mp4) / webM の 3 つの形式の音声をサポートします。ブラウザごとにサポートされる音声形式も異なります。
- インターネットエクスプローラ：
- バージョン 9.0 以降は mp4 形式をサポートします。
- Firefox ブラウザ:
- バージョン 3.5 以降は ogg 形式をサポートします。
- バージョン 4.0 以降は webM 形式をサポートします。
- オペラブラウザ:
- バージョン 10.5 以降は ogg 形式をサポートします。
- バージョン 10.6 以降は webM 形式をサポートします。
- Chrome ブラウザ:
- 5.0 以降は ogg / mp4 形式をサポートします。
- 6.0 以降は webM 形式をサポートします。
- Safariブラウザ:
- 3.0 以降は mp4 形式をサポートします。
ogg および mp4 形式のビデオを<video>video タグに含めることができ、すべてのブラウザでビデオを再生できます。
ブラウザのバージョンが古すぎる場合、サポートされる形式はありません。
ビデオタグのビデオ構文形式:
<video src="url地址" controls="controls"></video>
video タグの video 属性の概要:
- コントロール属性:値はコントロールであり、コントロール ボタンを有効にします。ブラウザごとにパフォーマンスが異なるため、通常の状況ではコントロール ボタンは表示されません。
- autoplay 属性:値は autoplay です。これにより、Chrome ブラウザーでの自動再生が無効になりますが、他のブラウザーでの自動再生は無効になりません。
- ビデオの再生をミュートに設定した場合、Chrom ブラウザで自動再生を設定して自動再生を実現できます。
- muted 属性:値はミュートされており、ビデオはサイレントで再生されるように設定されています。
- ビデオの再生をミュートに設定した場合、Chrom ブラウザで自動再生を設定して自動再生を実現できます。
- width 属性:値はプレーヤーの幅を設定するピクセル値です。歪みを避けるためにプレーヤーの幅と高さを 1 つだけ設定することをお勧めします。
- height 属性:値はプレーヤーの高さを設定するピクセル値です。歪みを避けるために、プレーヤーの幅と高さを 1 つだけ設定することをお勧めします。
- ループ属性:値はループであり、プレーヤーはループで再生するように設定されます。
- ポスター属性:値は画像の URL パスです。ビデオの位置を設定し、画像がロードされるのを待ちます。
- プリロード属性:
- 自動に設定します。これはビデオをプリロードすることを意味します。
- none を設定すると、ビデオを事前にロードしないことになります。
2.ビデオタグのビデオコード例
1. 基本的な例
コード例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 视频标签示例</title>
<style>
</style>
</head>
<body>
<video src="media/fengjing.mp4" controls="controls"></video>
</body>
</html>
の結果:
-
デフォルトの状態:
-
ビデオ再生後の効果:
2.ビデオサイズを変更する
video タグの幅を変更してビデオのサイズを変更します。
video {
width: 400px;
}
変更されたコード例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 视频标签示例</title>
<style>
video {
width: 400px;
}
</style>
</head>
<body>
<video src="media/fengjing.mp4" controls="controls"></video>
</body>
</html>
表示効果：
3.ビデオタグビデオ構成複数フォーマットビデオコード例
コード例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 视频标签示例</title>
<style>
video {
width: 400px;
}
</style>
</head>
<body>
<!-- 浏览器加载页面 , 发现 video 标签
读取该 video 标签 , 发现第一个 source 字标签 , 该标签配置 mp4 视频文件
- 如果浏览器支持 mp4 就播放该 mp4 文件
- 如果不支持 mp4 格式 , 则继续读取下一行
第二个 source 标签配置的是 ogg 格式的视频文件
- 如果浏览器支持 ogg 就播放该 ogg 文件
- 如果不支持 ogg 格式 , 则继续读取下一行 显示提示信息 -->
<video autoplay="autoplay" muted="muted" loop="loop" poster="media/pig.jpg">
<source src="media/fengjing.mp4" type="video/mp4" />
<source src="media/fengjing.ogg" type="video/ogg" />
很抱歉 , 当前浏览器不支持现有视频格式 ~
</video>
</body>
</html>
の結果:
