0

I'm looking to set the attribute of a video player dynamically with 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>

in my controller 

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

data-setup should be in single quotes 

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

but the attribute is being set in double quotes. 

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

How can I set the attribute with single quotes?

I've read over these questions How to escape a single quote ( ' ) in JavaScript?

Single quote escape in JavaScript function parameters

but they don't apply

Community
  • 1
  • 1
user2320607
  • 425
  • 1
  • 8
  • 19

2 Answers2

1

Try this \" instead of "

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

Also Take a look at 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

Nidhish Krishnan
  • 20,593
  • 6
  • 63
  • 76
1

EDIT INJECT VIDEOJS WITH ANGULAR:

Check this jsfidle I prepared 4u! https://jsfiddle.net/ok950wtj/

I think It will be not much complicated to make it run. Play pause button changes and the video seems to be loaded/detected!

I´ve checked your code, and I think you are trying to use Video.js library. In their webPage, they say:

Alternative Setup for Dynamically Loaded HTML

If your web page or application loads the video tag dynamically (ajax, appendChild, etc.), so that it may not exist when the page loads, you'll want to manually set up the player instead of relying on the data-setup attribute. To do this, first remove the data-setup attribute from the tag so there's no confusion around when the player is initialized. Next, run the following javascript some time after the Video.js javascript library has loaded, and after the video tag has been loaded into the DOM

Then it seems you need, for example, to call this way the Video init function, instead of trying to use the data-setup with quote problems.

Hope you can solve it.

function loadvideo(data-set)
{
    videojs("example_video_1", data-set, function(){
      // Player (this) is initialized and ready.
    }); 
}
Alejandro Teixeira Muñoz
  • 2,758
  • 1
  • 22
  • 31