Video.js 动态加载的 HTML答案

【问题标题】：Video.js Dynamically Loaded HTMLVideo.js 动态加载的 HTML
【发布时间】：2014-05-20 16:54:07
【问题描述】：

首先我需要说明我的英语不是最好的。我试图用这个 javascript 代码加载一个 php 文件：

function reload() {
var id = <?=$id?>;
$('#vidid').load('other.php?&id='+id,true);

}

有了这个

<a href="#videodiv2" onclick="reload()" class="button">Mostrar envio</a>
<div id="vidid"> </div>

如果我将“other.php”的代码直接放在主页上它可以工作，但如果我使用“函数 reload()”就不行。我搜索并找到了这个，所以按照我解释的方式做是不正确的 https://github.com/videojs/video.js/blob/master/docs/guides/setup.md

我读英文比写英文好 XD。但我无法让它与该手册一起使用

videojs("example_video_1", {}, function(){
// Player (this) is initialized and ready.
});

那是javascript代码对吗？所以在“example_video_1”中我应该替换为“vidid”？并将“function()”替换为“function reload()”？我应该在 // Player (this) 中写入的内容已初始化并准备就绪。注意：我使用允许显示 youtube 视频 + 自动播放的 video.js 变体。

对不起我的英语不好：S

感谢代码 bloodyKnuckles，它与 mp4 文件完美配合，但 youtube 的插件显示“Se ha producido un error intentalo de nuevo màs tarde/已发生错误，稍后再试”我使用了这个代码的小变体你写什么

<link type="text/css" rel="stylesheet" href="https://vjs.zencdn.net/4.5.1/video-js.css" />
<script src="https://vjs.zencdn.net/4.5.1/video.js"></script>
<script src="./src/youtube.js"></script>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script>
function reload() {
$('#vidid source').attr('src', '<?=$id?>');
videojs("vidid", {}, function(){
    this.play();
});
} 
</script>

在 HTML 中

<video id="vidid" class="video-js vjs-default-skin" autoplay="autoplay" controls preload="auto" width="640" height="360" data-setup='{ "techOrder": ["youtube"] }'>

<source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/youtube" />
</video><a href="#" onclick="reload(); return false;" class="button">Mostrar envio</a>

这与我在 other.php 中的类似，它工作正常...... youtube 徽标出现但当我按下播放时，不工作，并向我发送消息“发生错误，稍后再试” ... 像 URL/EMBED 一样不存在。但是使用相同的 text/url "" 它可以在 other.php 中使用。但不是在“ajax”之一。

【问题讨论】：

标签： javascript php jquery video

【解决方案1】：

试试这个：

function reload() {
    $('#vidid source').attr('src', 'other.php?&id=' + '<?=$id?>');
    videojs("vidid", {}, function(){
        this.load();
    });
}

假设 HTML 是：

<video id="vidid" class="video-js vjs-default-skin"
  controls preload="auto" width="640" height="264"
  poster="http://video-js.zencoder.com/oceans-clip.png">
    <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
</video>

<a href="#" onclick="reload(); return false;" class="button">Mostrar envio</a>

根据下面的评论进行更改。

【讨论】：

除非 Video.js 有一个属性更改事件，我认为这也不会解决它，因为 HTML5 没有这样的事件 (w3.org/2010/05/video/mediaevents.html) 可以提醒 Video.js 源文件有改变了。
这有帮助。更新了上面的回复。
我无法回答我自己的话题，因为在新手 :S 中，我编辑了我的第一篇文章，因为插件代码存在一个小问题 :S
我最近所做的一个重要更改是在 reload() 函数中。我将“this.play()”更改为“this.load()”。这对错误有帮助吗？
我进行了更改，但仍然出现错误，对于 MP4，初始源可以是“NOTHING”，javascript 中的 SRC 可以是 MP4，但是当我将 type='video/mp4' 更改为type="video/youtube" 和 ADD data-setup='{ "techOrder": ["youtube"] }' ... javascript 函数不起作用...因为我在初始 SRC 中放了一个错误的 url，它不要工作，但我按“MOSTRAR ENVIO”，什么都不做。我输入了一个正确的 URL，它可以工作。然后我按“Mostrar envio”并且什么都不改变......也许插件有另一个特定的代码？

【解决方案2】：

如果我理解正确，问题在于 Video.js 不会重新遍历 DOM 来查找您的视频元素；通过 AJAX 加载视频元素（即您的 reload() 函数），或者更重要的是，在 Video.js 初始化之后将不存在。

不过，我对 Video.js 还不够熟悉，无法告诉您如何最好地解决它。

【讨论】：