ＤＩＶと音声や動画の再生
中に音声ファイルの再生や、動画ファイルの再生タグを入れてみました。スタイルシートは前使ったものを少し変更して使いました。
■もどる
|
ＤＩＶと音声・動画
|
<!DOCTYPE html>
<HTML lang="ja">
<HEAD>
<META charset=UTF-8">
<META NAME="KEYWORDS" CONTENT="HTML5">
<TITLE>ＤＩＶについてその３</TITLE>
<link rel="stylesheet" href="divtest2_1.css">
</HEAD>
<BODY STYLE="font-size:1em">
<p id="p30">ＤＩＶと音声・動画</p>
<div id="box2">
<audio src="kkksamp2.mp3" loop controls >
<p>ご利用のブラウザでは再生できません</p></audio>
</div>
<div id="box3">
<video src="kkksamp.mp4" controls width="400"
><p>ご利用のブラウザでは再生できません。</p></video>
</div>
</BODY>
</HTML>
|
divtest2_1.cssの内容
@charset "UTF-8"
/* 背景の指定 */
body{
/* この記述がないとボックスが表示されない */
}
div {
font-size: 12px;
}
#box1 {
margin-left: 50px;
padding: 2em; /* ボックス内側の空白２文字分 */
border: 10px solid black; /* 境界の線の太さと色 */
/* ボックスの大きさの指定 */
width: 259px;
height: 205px;
background-color: green;
}
#box2 {
margin-left:100px; /* このボックスの周囲の空白範囲 */
padding: 2em; /* ボックス内側の空白２文字分 */
border: 10px solid black; /* 境界の線の太さと色 */
/* ボックスの大きさの指定 */
width: 400px;
height: 80px;
background-color: green;
}
#box3 {
margin-left:150px; /* このボックスの周囲の空白範囲 */
padding: 2em; /* ボックス内側の空白２文字分 */
border: 10px solid black; /* 境界の線の太さと色 */
/* ボックスの大きさの指定 */
width: 420px;
height: 200px;
background-color: green;
}
/* ここの記述は前回を参照してくださ。*/
p{
color:black;
}
#p30 {
font-size: 30px;
}
