使用 VideoJS 时如何动态加载视频 URL？

Question

我有一个网页需要在回调服务器以检索 URL 后加载视频。为了进行测试，我只是将视频加载到页面中，但当它起作用时，我将有选择地 show/hide 容器。

如果我直接将 URL 嵌入到 src 标签中并设置 data-setup="{}" 就可以了。

但是，当我尝试动态加载它时，它无法加载视频（没有错误）。

这是HTML：

<div id="video-container">
<video id="videoplayer" class="video-js vjs-default-skin" controls preload="auto">
    <source id="videosource" type='video/mp4'>
    <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a web browser that
        <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
</video>

这是我的代码运行:

$.get(url,
      function (data) {
          videojs("videosource", {}, function () {
                this.reset();
                this.src(data);
                this.load();
                this.play();
            });
        });

如果我不包含 .reset() 调用，它会出错并显示“this.el_.load 不是一个函数。如果我调用 .reset() 它不会抛出任何错误，但不会加载任何内容. 我是运行 Chrome，但它也无法在 Firefox 中加载。

设置src时我也试过其他参数，结果一样（没有错误，但也没有视频）：

this.src({ type: "video/mp4", src: data });

我正在通过 CDN 使用 5.8 版。

关于我哪里出错的任何想法？

Answer 1

将我的评论移至答案，当我使用 videojs 时，我只使用了 video 元素并使用了其中的 id。因此删除不需要的 source 元素并将其更改为 videojs("videoplayer", 以定位正确的元素。

使用 VideoJS 时如何动态加载视频 URL？

How do I load the video URL dynamically when using VideoJS?

html

javascript

video

jquery

video.js