Получение ширины и высоты 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>
Комментарии
0Нашли ошибку или хотите дополнить материал?