用单引号设置 angurlarjs 属性

Set angurlarjs attribute with single quotes

我希望使用 angularjs 动态设置视频播放器的属性。

<video id="youtube" class="video-js video-js-responsive vjs-default-skin vjs-big-play-centered" controls preload="none" data-width="640" data-height="360" data-setup=''></video>

在我的控制器中

var myEl = angular.element( document.querySelector('#youtube'));
myEl.attr('data-setup','{ "techOrder": ["youtube"], "src":"https://www.youtube.com/watch?v=yPIvqJsCOSo"}');

data-setup 应该用单引号引起来

data-setup='{ "techOrder": ["youtube"], "src":"https://www.youtube.com/watch?v=yPIvqJsCOSo"}'

但该属性是用双引号引起来的。

data-setup="{ "techOrder": ["youtube"], "src":"https://www.youtube.com/watch?v=yPIvqJsCOSo"}"

如何用单引号设置属性?

我已经阅读了这些问题How to escape a single quote ( ' ) in JavaScript?

Single quote escape in JavaScript function parameters

但它们不适用

试试这个 \" 而不是 "

myEl.attr('data-setup',\"{ \"techOrder\": [\"youtube\"], \"src\":\"https://www.youtube.com/watch?v=yPIvqJsCOSo\"}");

也看看Escaping Characters in Javascript

The characters "(quotation mark), '(single quote) and /(forward slash) are integral to the javascript code itself. So depending on how your javascript is constructed, at least two of these characters must be escaped when used in a javascript. To do that, a \ (backward slash) is placed before each of the aforementioned characters. Without these backward slashes, there is a very high likelihood that your script will not appear at all.

If you wish to display " (quotation marks) in the displayed text area of your javascript, precede the character with \ (backward slash). Or you can also use the character entity rather than the character itself. For instance, if you want to display the sentence

编辑 使用 ANGULAR:

注入视频

检查这个jsfidle 我准备了4u! https://jsfiddle.net/ok950wtj/

我觉得做起来不会太复杂运行。播放暂停键变了,视频好像是loaded/detected!

我检查了你的代码,我认为你正在尝试使用 Video.js 库。在他们的网页中,他们说:

动态加载的替代设置 HTML

如果您的网页或应用程序动态加载视频标签(ajax、appendChild 等),因此在页面加载时它可能不存在,您需要手动设置播放器而不是依赖数据设置属性。为此,首先从标签中删除 data-setup 属性,这样就不会混淆播放器何时初始化。接下来,运行 javascript Video.js javascript 库加载后的某个时间,并且视频标签已加载到 DOM

那么您似乎需要,例如,以这种方式调用 Video init 函数,而不是尝试使用具有引用问题的数据设置。

希望你能解决。

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