使用video js构造带有字符串的HTML视频

Question

我需要在这样的网站上构建一个灵活的视频播放器：

var content = "<video  ... /></video>";
$("#someDiv").html(content);

然而，我不能使用视频-js来做这件事，因为我对引号有异议。当我不使用字符串进行构造时，它可以工作，看起来如下所示：

小提琴

这是示例中的一行：

data-setup='{ "example_option": true}'>

这一行有两种引号："和'。要将这一行放入字符串中，以构造像上面这样的HTML代码，我可能需要第三种形式的引号。我什么都不知道。

另一篇文章建议使用\'，所以我尝试了如下：

'data-setup=\'{ "example_option": true}\''

请参阅小提琴

不过，这对我不起作用。视频-js功能会丢失。

有没有办法把第二把小提琴做得像第一把小提琴一样工作呢？

Answer 1

它与字符串无关，或者“它与这样一个事实有关:基于数据设置属性，视频js自动初始化页面加载上的所有视频。当页面加载时，html不在页面上，因此它错过了初始化过程。在添加html之后，需要手动初始化它。”

videojs(document.getElementsByClassName("video-js")[0], {}, function(){ // Player (this) is initialized and ready. });

将该代码添加到将视频放到页面上的行下面，它将工作。

http://jsfiddle.net/mbv4pbw5/2/

Answer 2

问题是在第二种情况下如何构造字符串。当您将多个字符串与内部属性连接时，请确保在两个属性之间添加一些空间。

正确代码：

var movie = '<video class="video-js vjs-default-skin vjs-big-play-centered video-js-fullscreen" ' +
    'controls preload="auto" width="640" height="266" ' +
    'poster="http://video-js.zencoder.com/oceans-clip.png" autoplay ' +
    'data-setup=\'{ "example_option": true}\'' +
    '>' +
    '<source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4"/>' +
    '</video>';

演示： http://jsfiddle.net/mbv4pbw5/3/