HTMLDOMビデオオブジェクト
HTMLのHTMLDOMビデオオブジェクトは、
<ビデオ>を作成する 要素
var videoObject = document.createElement(“VIDEO”)
ここでは、「videoObject」 次のプロパティを持つことができます-
| プロパティ | 説明 |
|---|---|
| audioTracks | |
| 動画にコントロールを表示するかどうかを設定/返します（再生/一時停止など） | |
| crossOrigin | |
| currentSrc | |
| currentTime | ビデオの現在の再生位置を設定/戻します（秒単位） |
| defaultMuted | |
| defaultPlaybackRate | |
| 動画の長さ（秒単位）を返します | |
| 動画が終了するたびに、動画の再生を再開するかどうかを設定/返します | |
| mediaGroup | |
| networkState | |
| playbackRate | |
| readyState | |
| src | |
| startDate | |
| textTracks | |
| videoTracks | |
| width |
プロパティの1つ、つまり HTML DOM Video networkStateの例を見てみましょう。 プロパティ-
例
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video networkState</title>
<style>
* {
padding: 2px;
margin:5px;
}
form {
width:70%;
margin: 0 auto;
text-align: center;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-Video-networkState</legend>
<video id="demo" width="320" controls><source src="https://www.tutorialspoint.com/html5/foo.mp4" type="video/mp4"></video><br>
<input type="button" onclick="setTrackDetails()" value="Set Source">
<input type="button" onclick="getTrackDetails()" value="Get Network State">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var demo = document.getElementById("demo");
var srcOfMedia = 'https://www.tutorialspoint.com/html5/foo.mp4';
function getTrackDetails() {
divDisplay.textContent = 'Network State: '+demo.networkState;
}
function setTrackDetails() {
demo.src = srcOfMedia;
demo.load();
}
</script>
</body>
</html> 出力
[ネットワーク状態の取得]をクリックします ソースが定義されていないボタン＆inus;
[ネットワーク状態の取得]をクリックします ソースが定義されているがブラウザがデータをダウンロードしているボタン-
また、「videoObject」 次の方法があります-
| メソッド | 説明 |
|---|---|
| addTextTrack（） | |
| canPlayType（） | |
| load（） | |
| play（） | |
| pause（） | Itisは再生中の動画を一時停止するために使用されていました |
ビデオcanPlayType（）の例を見てみましょう プロパティ-
例
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video canPlayType()</title>
<style>
* {
padding: 2px;
margin:5px;
}
form {
width:70%;
margin: 0 auto;
text-align: center;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-Video-canPlayType( )</legend>
<video id="demo" width="320" controls><source src="" type="video/mp4"></video><br>
<input type="button" onclick="getTrackDetails()" value="Does Browser Supports video/mp4?">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var demo = document.getElementById("demo");
var srcOfMedia = 'https://www.tutorialspoint.com/html5/foo.mp4';
function getTrackDetails() {
var ans = demo.canPlayType('video/mp4');
if(ans !== ''){
divDisplay.textContent = 'Browser supports mp4';
demo.src = srcOfMedia;
demo.load();
}
else
divDisplay.textContent = 'Browser does not supports mp4';
}
</script>
</body>
</html> 出力
「ブラウザはビデオ/mp4をサポートしていますか？」をクリックする前に ボタン-
「ブラウザはビデオ/mp4をサポートしていますか」をクリックした後 ボタン-
-
HTMLDOMMouseEventオブジェクト
HTML DOM MouseEventオブジェクトは、マウスとHTMLドキュメント要素との相互作用で発生するイベントを表します。 ここでは、「 MouseEvent 」は次のプロパティとメソッドを持つことができます- プロパティ/メソッド 説明 altKey マウスイベントがトリガーされたときにキーボードの「ALT」キーが押されたかどうかを返します ボタン マウスイベントがトリガーされたときに押されたマウスボタンに対応する数値を返します ボタン マウスイベントがトリガーされたときに押されたマウスボタンを返します clientX
-
HTMLDOMUlオブジェクト
HTMLのHTMLDOMUlオブジェクトは、 を表します 要素。 を作成する 要素 var ulObject = document.createElement(“UL”) ここでは、「ulObject」 次のプロパティを持つことができますが、 HTML5ではサポートされていません − プロパティ 説明 コンパクト 順不同リストを通常より小さく表示するかどうかを設定/返します タイプ 順序付けされていないリストのtype属性の値を設定/返します 順不同リストの例を見てみましょう 要素- 例 <!DOCTYPE