JSFiddle - React, Tailwind, and code Playground

by Derk-Jan Hartman

HTML

<!-- broken
https://upload.wikimedia.org/wikipedia/commons/f/fd/Chopin_Nocturne_Op_9_No_2.ogg
-->

<video controls>
  <source src="https://upload.wikimedia.org/wikipedia/commons/5/5d/Contes_humoristiques_01_gautier.ogg" type='audio/ogg; codecs="vorbis"' />
  <!-- broken
  <source src="https://upload.wikimedia.org/wikipedia/commons/f/fd/Chopin_Nocturne_Op_9_No_2.ogg" type='audio/ogg; codecs="vorbis"' />
-->
</video>

JavaScript

let video = document.getElementsByTagName('video')[0];
console.log(video.canPlayType('audio/ogg; codecs="vorbis"'));
video.onerror = function(e) {
console.log( 'error: ' + e );
};
video.onload = function( e ) {
console.log( 'load event: ' + e );
}
video.onloadeddata = function( e ) {
console.log( 'loadeddata event: ' + e );
}
video.onloadedmetadata = function( e ) {
console.log( 'loadedmetadata event: ' + e );
}

video.play().then(function(){
console.log('play succeeded');
}, function(){
console.log('play failed');
});