JavaScript: Ширина и высота html5 видео

Получение ширины и высоты html5 видео в разных состояниях readyState.

 

<video controls autoplay loop muted playsinline preload="auto" id="sampleVideo">
  <source src="sample.mp4" type="video/mp4">  
  Your browser doesn't support HTML5 video tag
</video>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
vd = {
	init : function(){		
		var video = document.getElementById('sampleVideo');
		vd.initVideo( video );		
	},	
	initVideo : function( video ){	

		/**
		HAVE_NOTHING 0 No information is available about the media resource.
		HAVE_METADATA 1 Enough of the media resource has been retrieved that the metadata attributes are initialized. Seeking will no longer raise an exception.
		HAVE_CURRENT_DATA 2 Data is available for the current playback position, but not enough to actually play more than one frame.
		HAVE_FUTURE_DATA 3 Data for the current playback position as well as for at least a little bit of time into the future is available (in other words, at least two frames of video, for example).
		HAVE_ENOUGH_DATA 4 Enough data is available—and the download rate is high enough—that the media can be played through to the end without interruption.
		*/
		if( video.readyState == 4 ){
			vd.run( video.videoWidth, video.videoHeight );
		}			
		video.addEventListener('loadeddata', function(){
			if( video.readyState  == 0 ){
				$(function(){
					video.bind('loadedmetadata', function(){
						vd.run( $(this).videoWidth, $(this).videoHeight );
					});
				});
			} else if( video.readyState  > 0 ){
				vd.run( video.videoWidth, video.videoHeight );
			}
		});
	},
	run : function( w, h ){
		console.log( 'video size:');
		console.log( w, h );
	}

}
vd.init();
</script>

JavaScript up: 3.4 г. просмотров: 1.2k