Как в диве заменить фрагмент скрипта, используя GetElementById?

Question

[rusrich]

Есть плеер на JS, в котором необходимо менять ссылку на видео. Выглядит так:

<div id="playera"></div>
<div id="player">
    <%= javascript_tag do %>
        new Playerjs({
        "id":"playera",
        "file": "<%= "#{@video.link_video1}" %>"
        });
    <% end %>
</div>

Так же есть селектор, в котором выбираем ссылку на видео:

<select id="slct3" name="slct3" onchange="funlink(this.id,'player')">
  <option value="Ссылка 1">Ссылка на видео 1</option>
  <option value="Ссылка 2">Ссылка на видео 2</option>
  <option value="Ссылка 3">Ссылка на видео 3</option>
</select>
# <div id="linkurl">Ссылка на видео</div>

Скрипт на изменение ссылки селектором:

function funlink(s1,s2){
	var s1 = document.getElementById(s1);
	var s2 = document.getElementById(s2);
	s2.innerHTML = "";
	if(s1.value == "Озвучка 1"){
		s2.innerHTML = "@video.link_video1";
	} else if(s1.value == "Озвучка 2"){
		s2.innerHTML = "@video.link_video2";
	} else if(s1.value == "Озвучка 3"){
		s2.innerHTML = "@video.link_video3";
	}
  }

Теперь вопрос:
Поскольку я не могу сообразить, как конкретно можно заменить часть строки в скрипте плеера, а именно
"file": "<%= "#{@video.link_video1}" %>"
так как идентификация элемента DOM происходит по ID, то есть будет меняться содержимое всего ДИВа,
то допускаю вариант с заменой всего содержимого ДИВа .
В этом случае сталкиваюсь с проблемой, так как данный див содержит теги скрипта и сам скрипт.

Планировал сгенерированный код под каждую ссылку вынести в методы, где собиралось содержимое дива вместе с новой ссылкой на видео, но не знаю как правильно прописать.
Элементарно даже если прописать просто теги <script></script> во вьюхе отображается некорректно, даже если использовать:
"\<script\>\</script\>" то получается фигня.

Возможно где-то сильно чего-то не допонимаю.
Хотелось бы, чтобы подсказали решение или хотя бы направили куда копать.

Работаю в фреймворке RubyOnRails.

Answer 1

[rusrich]

В общем выбрал направление, но прошу подсказать, поскольку в JS не силен.

<div id="playera"></div>
<div id="player">
    <%= javascript_tag do %>
    // Объявляю переменную, которая принимает содержимое ДИВа, куда я генерирую ссылку на видео
     var content=document.getElementById("linkurl").innerHTML
        new Playerjs({
        "id":"playera",
        // Теперь как мне вывести значение переменной CONTENT? Если пишу CONTENT, то в HTML и отображается content, а мне нужно именно значение, которое присвоил.
        "file": "content"
        });
    <% end %>
</div>

Answer 2

[Даниил Братухин]

Мне кажется, я понимаю суть проблемы, но Ruby on Rails не знаю от слова совсем, так что... в случае чего всё приведённое ниже – псевдокод :D

По делу: если вы замените часть строки в скрипте плеера, то ничего не произойдёт, потому что к тому моменту этот код уже будет давно скомпилирован и выполнен браузером.

Начните с простого – создайте свойство в глобальном контексте и запишите туда ссылку на экземпляр. Затем в функции, которая обрабатывает изменение значения select, обратитесь к API плеера и запустите другое видео. Всё вместе будет выглядеть примерно так:

<div id="player-wrapper"></div>

<%= javascript_tag do %>
  var player = new Playerjs({
    id:"player-wrapper",
    file: "<%= @video.link_video1 %>"
  });
<% end %>

<select value="<%= @video.link_video1 %>" onchange="player.api('play', this.value)">
  <option value="<%= @video.link_video1 %>">Ссылка на видео 1</option>
  <option value="<%= @video.link_video2 %>">Ссылка на видео 2</option>
  <option value="<%= @video.link_video3 %>">Ссылка на видео 3</option>
</select>

Как только это заработает, можно будет подумать, как вынести JS из разметки, убрать глобальные переменные и т.д.