2014-11-21 3 views
0

Я использую сценарий camendesign VIDEO FOR EVERYBODY, чтобы вставить элемент видео на мою страницу и иметь флеш-плеер для тех, у кого нет функциональности HTML5.Вставка переменных Javascript в строку flashVars

Но я изменяю URL-адреса, которые будут динамически загружаться при вызове страницы. Все отлично разбирается, за исключением строки flashVars в теге params объекта embed. Значение этого тега params должно быть URL-кодом, поэтому у меня есть немного javascript, прежде чем видео будет показано на странице, чтобы закодировать URL-адрес для изображения плаката и видеофайла, используя значения, которые загружены.

Мой вопрос заключается в следующем: как правильно обработать два значения, чтобы они правильно соответствовали значению flashVars?

Вот мой код: (следовательно, это Java-сайт я бегу, следовательно, JAVA с: наборы)

<!DOCTYPE HTML> 
<c:set var="title" value="Blender Demo Reel 2013"/> 
<c:set var="file" value="bdr2013"/> 
<c:set var="poster" value="poster.jpg"/> 
<c:set var="width" value="960"/> 
<c:set var="height" value="540"/> 

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>New Video Player</title> 
</head> 

<script> 
    var posterEncode = encodeURIComponent("${poster}"); 
    var fileEncode = encodeURIComponent("${file}"); 
</script> 

<body> 

<div id="videoContainer"> 
    <video controls preload poster="${poster}" width="${width}" height="${height}"> 
     <source src="${file}.mp4" type="video/mp4"> 
     <source src="${file}.ogv" type="video/ogg"> 
     <source src="${file}.webm" type="video/webm"> 
     <object type="application/x-shockwave-flash" data="http://player.longtailvideo.com/player.swf" width="${width}" height="${height}"> 
      <param name="movie" value="http://player.longtailvideo.com/player.swf" /> 
      <param name="allowFullScreen" value="true" /> 
      <param name="wmode" value="transparent" /> 
      <param name="flashVars" value="controlbar=over&amp;image="+posterEncode+"&amp;file="+fileEncode+".mp4" /> 
      <img alt="Big Buck Bunny" src="${poster}" width="${width}" height="${height}" title="No video playback capabilities, please download the video below" /> 
     </object> 
    </video> 
</div> 

</body> 
</html> 

Исходный код при просмотре этого в браузере возвращается, как это:

<script> 
    var posterEncode = encodeURIComponent("poster.jpg"); 
    var fileEncode = encodeURIComponent("bdr2013"); 
</script> 

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>New Video Player</title> 
<body> 

<div id="videoContainer"> 
    <video controls preload poster="poster.jpg" width="960" height="540"> 
     <source src="bdr2013.mp4" type="video/mp4"> 
     <source src="bdr2013.ogv" type="video/ogg"> 
     <source src="bdr2013.webm" type="video/webm"> 
     <object type="application/x-shockwave-flash" data="http://player.longtailvideo.com/player.swf" width="960" height="540"> 
      <param name="movie" value="http://player.longtailvideo.com/player.swf" /> 
      <param name="allowFullScreen" value="true" /> 
      <param name="wmode" value="transparent" /> 
      <param name="flashVars" value="controlbar=over&amp;image="+posterEncode+"&amp;file="+fileEncode+".mp4" /> 
      <img alt="Big Buck Bunny" src="poster.jpg" width="960" height="540" title="No video playback capabilities, please download the video below" /> 
     </object> 
    </video> 
</div> 

</body> 
</html> 
+0

Почему вы не используете кодировку URI 'poster' и' file' в Java на стороне сервера? –

+0

Но разве мне все равно придется вставлять эти переменные в строку flashVars? И вот что я задаю в вышеупомянутом вопросе. – Murphy1976

ответ

0

Вы просто пишете атрибуты HTML. Здесь нет необходимости в JavaScript. URI кодирования строки в Java и поместить их в Java-переменных, а затем поместить их в HTML так же, как вы делаете с любой другой переменной Java:

<param name="flashVars" value="controlbar=over&amp;image=${posterEncoded}&amp;file=${fileEncoded}.mp4" /> 
+0

Но тогда мне понадобится второй набор переменных для тегов видеоисточника, не так ли? – Murphy1976

+0

Я не уверен, что вы просите, но более общий ответ: если вам просто нужно получить значения в тегах HTML один раз, а затем сделать это на стороне сервера. Если вам нужны значения для динамического изменения в браузере в ответ на действия пользователя, вам может понадобиться JavaScript, но в противном случае просто сделайте это на Java. –

+0

То, что я хочу сделать, - это вызвать все данные один раз, закодировать его (при необходимости), а затем подключить его к местам, где это нужно. разница между значением src источника видеоисточника и значением файла flashvars заключается в том, что значение flashVars должно быть URL-кодировано, значение источника src источника видео отсутствует. Поэтому, если есть способ привести все данные на эту страницу, тогда поместите их там, где они должны быть, и в том формате, в котором он должен быть один раз, будет идеальным. – Murphy1976

0

ура!

<!DOCTYPE HTML> 
<c:set var="title" value="Blender Demo Reel 2013"/> 
<c:set var="file" value="bdr2013"/> 
<c:set var="poster" value="poster.jpg"/> 
<c:set var="width" value="960"/> 
<c:set var="height" value="540"/> 

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>New Video Player</title> 
</head> 

<body> 

<div id="videoContainer"> 
    <video controls preload poster="${poster}" width="${width}" height="${height}"> 
     <source src="${file}.mp4" type="video/mp4"> 
     <source src="${file}.ogv" type="video/ogg"> 
     <source src="${file}.webm" type="video/webm"> 
     <object type="application/x-shockwave-flash" data="http://player.longtailvideo.com/player.swf" width="${width}" height="${height}"> 
      <param name="movie" value="http://player.longtailvideo.com/player.swf" /> 
      <param name="allowFullScreen" value="true" /> 
      <param name="wmode" value="transparent" /> 
      <script> 
       var posterEncode = encodeURIComponent("${poster}"); 
       var fileEncode = encodeURIComponent("${file}"); 
       document.write("<param name='flashVars' value='controlbar=over&amp;image="+posterEncode+"&amp;file="+fileEncode+".mp4' />"); 
      </script> 
      <img alt="${title}" src="${poster}" width="${width}" height="${height}" title="${title}" /> 
     </object> 
    </video> 
</div> 

</body> 
</html> 

Я бросил яваскрипт функции encodeURIComponent и document.write в котором мне нужна динамические парах линия, чтобы быть, и Shazam! работал как шарм.

Смежные вопросы