動画のサイズを取得する方法
表示されているサイズではなく、動画の本来のサイズを取得したい場合は、video要素のvideoWidthとvideoHeightを参照しましょう。アスペクト比もこれで調べられます。
サンプルコード
videoWidth、videoHeightの値は、動画のメタデータを読み込んだ後でなければ取得できません。処理を実行するタイミングを調整して下さい。
video要素から取得
DOMにあるvideo要素からサイズを取得します。
<video controls preload="metadata" src="movie.mp4" id="target">
var element = document.getElementById( "target" ) ;
var intervalId = setInterval( function () {
if ( element.readyState >= HTMLMediaElement.HAVE_METADATA ) {
var width = element.videoWidth ;
var height = element.videoHeight ;
clearInterval( intervalId ) ;
}
}, 500 ) ;
element.load() ;
パスから取得
サーバー上のURL、ローカル環境のBlob URLを指定して、サイズを取得できます。
var path = "./movie.mp4" ;
var element = document.createElement( "video" ) ;
element.onloadedmetadata = function () {
var width = element.videoWidth ;
var height = element.videoHeight ;
}
element.src = path ;
element.load() ;
デモ
video要素から取得
// <video src="movie.mp4" id="target">
var element = document.getElementById( "target" ) ;
var intervalId = setInterval( function () {
if ( element.readyState >= HTMLMediaElement.HAVE_METADATA ) {
var width = element.videoWidth ;
var height = element.videoHeight ;
clearInterval( intervalId ) ;
}
}, 500 ) ;
element.load() ;
width =
height =
パスから取得
var path = "./movie.mp4" ;
var element = document.createElement( "video" ) ;
element.onloadedmetadata = function () {
var width = element.videoWidth ;
var height = element.videoHeight ;
}
element.src = path ;
element.load() ;
path = ./movie.mp4
width =
height =
関連記事
- ピンチイン・ピンチアウトでズームする方法
- タッチデバイスのピンチイン、ピンチアウトで画像を縮小、拡大します。
- 画像のサイズを取得する方法
- 画像の本来のサイズを取得するには、img要素のnaturalWidthとnaturalHeightを参照します。
- ローカル動画を表示する方法
- ユーザーの端末に保存されているローカル動画を表示します。
- 小数を四捨五入、切り捨て、切り上げする方法
- 小数の切り捨て、切り上げ、四捨五入をします。また、小数点第n位までの数値を出します。
- ユーザーエージェントを取得する方法
- ユーザーエージェントを取得するには、navigator.userAgentを参照しましょう。
- ローカル画像を表示する方法
- ユーザーの端末に保存されているローカル画像を表示します。