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>
Комментарии