SYNCERのロゴ
アイキャッチ画像

動画のサイズを取得する方法

表示されているサイズではなく、動画の本来のサイズを取得したい場合は、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 =

  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年7月31日 (月)
コンテンツを公開しました。