Playing youtu.be and vimeo videos in videojs

Question

I am using videojs library in the .net core web application. The reason I chose this library was that it is easily customizable. Their website mentions that we can embed youtube and Vimeo URLs as well. But, when I am trying to do the same it is not working. I get an error that "no compatible source was found". Here is my code: HTML:

<video-js id="my-player"
          class="video-js"
          controls
          preload="auto"              
          poster="../../../Images/bg_brooking.png"
          >
    <source src="https://www.youtube.com/watch?v=_BcBHTHvOVo" type="video/youtube"/></source>
    <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a
        web browser that
        <a href="https://videojs.com/html5-video-support/" target="_blank">
            supports HTML5 video
        </a>
    </p>
</video-js>

Javascript:

$(document).ready(function () {
var options = { responsive: true, fluid: true};

var player = videojs('my-player', options, function onPlayerReady() {
    //videojs.log('Your player is ready!');

    // In this context, `this` is the player that was created by Video.js.
    this.fill(false);
    this.seekButtons({
        forward: 10,
        back: 10
    });
    // How about an event listener?
    this.on('ended', function () {
        videojs.log('Awww...over so soon?!');
    });
   });
 });

I am using videoJs 7.15.0. I also tried using 'videojs-youtube' plugin. But it not working either. I am not able to find much data related to playing youtube videos in videjs.

If this is not possible then I which other player should I use?

Answer 1

There's a complete example of using videojs-youtube in the project's readme. Notably, the techOrder needs to be included in the setup options - your example above does not have that. The techOrder determines which sources will be attempted, in which order.

var options = { responsive: true, fluid: true, techOrder: ['youtube']};
// or techOrder: ['youtube', 'html5']

videojs-vimeo's setup is similar, with a vimeo tech.