使用video-js构建一个包含字符串的HTML视频

Constructing a HTML video with character strings using video-js

本文关键字：字符串 包含 HTML 视频 一个 构建 video-js 使用      更新时间：2023-09-26

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

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

然而，我无法使用video-js来完成这项工作，因为我对引号有问题。当我不使用字符串构建时，它的工作原理和外观如下：

Fiddle

这是示例中的一行：

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

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

另一篇帖子建议使用''，所以我尝试了这个：

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

参见Fiddle

然而，这对我来说不起作用。视频js功能会丢失。

有什么想法可以让第二把小提琴像第一把小提琴一样工作吗？

它与字符串无关，'或"它与video-js根据该数据设置属性自动初始化页面加载时的所有视频有关。当页面加载时，html不在页面上，因此它错过了初始化过程。您需要在添加html后手动初始化它。

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

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

http://jsfiddle.net/mbv4pbw5/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/

相关文章：