使用video-js用字符串构建HTML个视频

Question

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

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

但是，我无法使用 video-js 执行此操作，因为我对引号有疑问。当我不使用字符串构造时，它可以工作并且看起来像这样：

Fiddle

这是示例的一行：

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

这一行有两种引号："和'。为了将此行放入字符串中以构建如上所述的 HTML-Code，我可能需要第三种形式的引号。我一个都不知道。

另一个 post 建议使用 \'，所以我尝试了这个：

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

见Fiddle

但是这对我不起作用。 video-js 功能丢失。

有没有想法让第二个 fiddle 构造得像第一个 fiddle 一样工作？

Answer 1

它与字符串无关，' 或 " 它与 video-js 根据该数据设置属性在页面加载时自动初始化所有视频这一事实有关。当页面加载时，html页面上没有，所以漏了初始化过程，需要在添加html后手动初始化

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

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

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

Answer 2

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

正确代码：

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/

使用video-js用字符串构建HTML个视频

Constructing a HTML video with character strings using video-js

html

javascript

string

quotes

video.js