在 videojs 中播放 youtu.be 和 vimeo 视频

Question

我在 .net 核心 Web 应用程序中使用 videojs 库。我选择这个库的原因是它很容易定制。他们的网站提到我们也可以嵌入 youtube 和 Vimeo URL。但是，当我尝试做同样的事情时，它不起作用。我收到“找不到兼容源”的错误消息。这是我的代码： 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?!');
    });
   });
 });

我正在使用 videoJs 7.15.0。我也尝试使用 'videojs-youtube' 插件。但它也不起作用。我找不到很多与在 videjs 中播放 youtube 视频相关的数据。

如果这不可能，那么我应该使用哪个其他播放器？

Answer 1

项目readme中有使用videojs-youtube的完整示例。值得注意的是， techOrder 需要包含在设置选项中 - 您上面的示例没有。 techOrder 确定将以何种顺序尝试哪些来源。

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

videojs-vimeo 的设置类似，具有 vimeo 技术。

在 videojs 中播放 youtu.be 和 vimeo 视频

Playing youtu.be and vimeo videos in videojs

javascript

video-streaming

video.js

ott

asp.net-core