HTML 페이지에 영상 임베딩에 대한 자세한 설명과 JS 제어 전환 영상 예시_HTML/Xhtml_웹페이지 제작

먼저 페이지에 동영상을 삽입하는 HTML 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

<p id="youku" class="youku"> 
<object id="obx" name="obx" width="290" height="260"> 
<param name="movie" value="http://www.tudou.com/v/6HJvxxkarzk/&resourceId=0_04_11_19/v.swf"></param> 
<param name="allowFullScreen" value="true"></param> 
<param name="allowscriptaccess" value="always"></param> 
<param name="wmode" value="opaque"></param> 
<embed src="http://www.tudou.com/v/6HJvxxkarzk/&resourceId=0_04_11_19/v.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque" width="290" height="260"></embed> 
</object> 
</p>

그 중 object 태그와 embed 태그를 동시에 사용하는 것은 더 많은 브라우저와 호환되기 위한 것이지만, 두 태그 아래에서 동일한 속성 값을 유지하도록 주의하시기 바랍니다. 태그가 일관됩니다.
PS: 273238ce9338fbb04bee6997e5552b95 및 d8e2720730be5ddc9c2a3782839e8eb6 태그와 해당 속성에 대한 소개 및 사용법은 OBJECT 및 EMBED 태그 문서를 참조하세요.

그럼 JS를 이용해 삽입된 영상의 주소를 동적으로 변경하여 다음 영상을 재생하는 방법에 대해 알아보겠습니다.
이때 많은 사람들은 위 param 노드의 value 속성과 embed 노드의 src 속성을 찾기 위해 태그 이름이나 DOM 메소드를 사용하고 JS 동적 할당을 사용하여 주소를 변경하는 것을 즉시 생각할 수 있습니다. 그런데 테스트 결과, 영상 주소가 바뀌었음에도 불구하고 해당 페이지에 표시되는 영상은 그대로 남아 있어 의아했다.

페이지가 로드되면 삽입된 개체의 모든 매개변수가 초기화되는 것으로 나타났습니다. 단순히 주소 속성 값을 변경하는 것만으로는 다음 동영상으로 전환할 수 없습니다. . 회사 직원과 마찬가지로 주소가 변경(이전)된 경우에도 여전히 원래 직원이지 다른 사람이 아닙니다.
다시 로드할 때 자주 사용하는 두 가지 방법이 있습니다(위 코드를 예로 들겠습니다).
① JS의 obj.innerHTML 메서드를 사용하여 전체 개체 개체를 재설정합니다.

코드 복사

코드는 다음과 같습니다.

/*功能：动态切换视频*/ 
function setvideo(url){ 
var youku = document.getElementById("youku"); 
var htmlstr = "<object id=&#39;obx&#39; name=&#39;obx&#39; width=&#39;290&#39; height=&#39;260&#39;>"; 
htmlstr += "<param name=&#39;movie&#39; value=&#39;"+url+"&#39;></param>"; 
htmlstr += "<param name=&#39;allowFullScreen&#39; value=&#39;true&#39;></param>"; 
htmlstr += "<param name=&#39;allowscriptaccess&#39; value=&#39;always&#39;></param>"; 
htmlstr += "<param name=&#39;wmode&#39; value=&#39;opaque&#39;></param>"; 
htmlstr += "<embed src=&#39;"+url+"&#39; type=&#39;application/x-shockwave-flash&#39; allowscriptaccess=&#39;always&#39; allowfullscreen=&#39;true&#39; wmode=&#39;opaque&#39; width=&#39;290&#39; height=&#39;260&#39;></embed>"; 
htmlstr += "</object>"; 
youku.innerHTML = htmlstr; 
}

②p 컨테이너에 iframe을 배치합니다. 현재 상위 페이지에 영향을 주지 않고 동적으로 새로 고쳐집니다.
구체적인 코드는 작성하지 않겠습니다.
　1. URL을 사용하여 값을 전달합니다.
2. 상위 페이지 또는 하위 페이지는 숨겨진 도메인을 생성하여 하위 페이지가 획득할 주소를 동적으로 저장합니다.
　3. 서브 페이지에서 개체 개체를 재설정하려면 ① 방법을 사용하십시오.
4. window.open과 같은 다른 방법은 거리가 멀고 권장되지 않습니다.
이 시점에서 비디오 전환 삽입 및 제어가 성공적으로 구현되었습니다. 그런데 의도치 않게 문제를 발견했습니다.
새 동영상으로 전환한 후 새로고침을 클릭하거나 F5 또는 다른 방법으로 페이지를 새로고침하면 '개체 누락' 스크립트 오류가 팝업됩니다. 오류 코드를 찾아보니 플래시 내부 스크립트 오류인 걸 확인했습니다.

function __flash__removeCallback(instance, name) { 
instance[name] = null; 
}

페이지에서 플래시를 사용하고, 플래시에서 flash.external.ExternalInterface.addCallback 메소드를 사용하는 경우 __flash__removeCallback 웹 페이지를 새로 고칠 때 보고됩니다. js 오류: 누락된 개체(라인 53), (Jscript-scriptblock). 이 함수의 호출 위치는 다음과 같습니다.

__flash__removeCallback(document.getElementById(""), "dewprev");

분명히 document.getElementById("")는 null을 반환하므로 __flash__removeCallback이 오류를 보고하게 됩니다. 저는 개인적으로 flash의 내장 메서드라고 생각합니다. :

function __flash__removeCallback(instance, name) { 
if (instance != null) { instance[name] = null; } 
}

누군가 테스트한 결과 여기서 document.getElementById("")가 플래시 컨트롤 개체의 id/name 속성을 가져오는 것임을 발견했습니다. 이 오류가 발생하는 이유는 다음과 같습니다. Object Properties에 ID/이름이 설정되어 있지 않기 때문에 설정 후 오류가 발생하지 않습니다. 그러나 사실 내 모든 개체에는 id/name 속성이 있으므로 이러한 이유에 동의하지 않습니다. 이러한 관점에서 볼 때, 이 ID/이름을 추가하는 방법은 일부 사람들의 문제를 해결할 수 있으며 이것이 이 문제의 유일한 원인은 아닙니다.
그 후 오랫동안 열심히 검색한 결과 마침내 외국 웹사이트에서 해결책을 찾았습니다. Dave Smith라는 사람이 작성한 코드를 기반으로 몇 가지 개선을 하여 페이지 수를 줄였습니다. 코드 실행에 대한 압박감. 그가 제공한 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

<script type="text/javascript"> 
(function(){ 
　　var setRemoveCallback = function(){ 
　　__flash__removeCallback = function(instance, name){ 
　　　　　　if (instance){ 
instance[name] =null; 
} 
}; 
window.setTimeout(setRemoveCallback, 10); 
}; 
setRemoveCallback(); 
})(); 
</script>

대략적으로 이 스크립트를 내부에서 다시 작성한다는 의미입니다. 플래시는 문제를 해결할 수 있습니다. 현재 문제는 객체가 로드된 후 어느 시점에 플래시 내부의 스크립트가 다시 작성한 함수를 덮어쓴다는 것입니다. 따라서 때가 되면 플레이어가 다시 작성한 함수를 호출할 것이라는 보장이 없습니다. 이 목표를 달성하기 위해 그는 10밀리초마다 플래시 내부에 제공되는 기능을 재정의하는 기능을 설정했습니다. 이 문제는 해결되었습니다. 동시에 그는 이 코드를 단순화하여 다음 두 가지 "버전"을 형성했습니다.
단순화된 버전 1: 약간 더 간단함

코드 복사

코드는 다음과 같습니다. :

<script type="text/javascript"> 
　　var setRemoveCallback = function() { 
__flash__removeCallback = function(instance, name) { 
　　　　　　　if(instance) { 
instance[name] = null; 
} 
}; 
window.setTimeout(setRemoveCallback, 10); 
}; 
setRemoveCallback(); 
</script>

간단 버전 2: 완전 간단

코드 복사

코드는 다음과 같습니다.

<script type="text/javascript">
(function(){
var s=function(){
__flash__removeCallback=function(i,n){if(i)i[n]=null;
};
window.setTimeout(s,10);};s();})();
</script>

제 생각에는 한동안 내 생각을 합리화했습니다.
페이지를 새로 고칠 때 이 오류가 발생합니다. 페이지를 새로 고치는 과정은 이전 페이지가 사라지고 새 페이지가 다시 로드되는 것입니다. 이론적으로는 새 페이지를 다시 로드하는 데 문제가 없으므로 이전 페이지가 죽기 전에 "사후 관리" 작업에서 오류가 발생합니다. 페이지가 종료되기 전에 플래시 내부에 콜백 함수를 다시 작성하기만 하면 동일한 목적을 달성할 수 있으며 코드는 다음과 같으며 테스트는 통과됩니다.

코드 복사

코드는 다음과 같습니다.

/*解决视频切换内部脚本错误*/ 
<script type="text/javascript"> 
function endcall(){var s=function(){__flash__removeCallback=function(i,n){if(i)i[n]=null;};window.setTimeout(s,10);};s();} 
window.onbeforeunload = endcall; 
</script>