2014-11-21 3 views
0

camendesign의 VIDEO FOR EVERYBODY 스크립트를 사용하여 내 페이지에 동영상 요소를 삽입하고 HTML5 기능이없는 사용자를위한 플래시 플레이어 대체 버전을 사용합니다.flashVars 문자열에 자바 스크립트 변수 삽입하기

그러나 페이지가 호출 될 때 동적으로로드되도록 URL을 변경하고 있습니다. object embed params 태그의 flashVars 문자열을 제외한 모든 항목이 파싱됩니다. 이 params 태그의 값은 URL 인코딩되어야하므로 비디오가 페이지에 렌더링되기 전에 비디오의 URL을 포스터 이미지에로드하고로드 된 값을 사용하여 비디오 파일을 인코딩해야합니다.

내 질문은 : 어떻게 적절하게 flashVars 값을 완료 할 수 있도록 올바르게 두 값을 구문 분석 할 수 있습니까? 여기

내 코드입니다 : (결과적으로 이것이 내가 실행 해요 자바 사이트입니다, 따라서 자바 C : 세트)

<!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

왜 서버 측에서 Java에서'poster'와'file'의 URI 인코딩을하지 않습니까? –

+0

하지만 그 변수를 flashVars 문자열에 삽입해야합니까? 그리고 그것은 제가 위의 질문에서 묻는 것입니다. – Murphy1976

답변

0

방금 ​​HTML 속성을 작성했습니다. 여기에 자바 스크립트가 필요 없습니다. URI 자바 문자열을 인코딩 및 Java 변수에 넣어 다음 다른 Java 변수로 당신이처럼 당신의 HTML에 넣어 :

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

하지만 비디오 소스 태그에 두 번째 변수 세트가 필요합니다. 그렇지 않습니까? – Murphy1976

+0

당신이 묻고있는 것이 확실하지 않지만, 더 큰 대답은 : HTML 태그에 값을 한 번만 입력해야한다면 서버 측에서 값을 가져와야합니다. 사용자 작업에 대한 응답으로 브라우저에서 동적으로 값을 변경해야하는 경우 자바 스크립트가 필요할 수도 있지만 그렇지 않은 경우 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 기능과 내가 할 동적 PARAM 라인을해야하고, 와우 곳으로 document.write를 던졌다! 매력처럼 일했다.

관련 문제