지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > HTML 튜토리얼 > HTML 페이지에 비디오를 삽입하고 JS 제어 하에서 비디오를 전환하는 예에 대한 자세한 설명

HTML 페이지에 비디오를 삽입하고 JS 제어 하에서 비디오를 전환하는 예에 대한 자세한 설명

高洛峰
풀어 주다： 2017-03-06 16:57:59
원래의
2344명이 탐색했습니다.

이 글에서는 HTML 페이지에 동영상을 삽입하는 방법과 JS를 사용하여 동영상 전환을 제어하는 ​​방법을 자세히 소개합니다. 자세한 내용은 아래를 참조하세요. 먼저, 페이지에 동영상을 삽입하기 위한 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: 및 태그와 해당 속성에 대한 소개 및 사용법은 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을 배치하여 현재 상위 페이지에 영향을 주지 않고 iframe의 페이지를 동적으로 새로 고칠 수 있도록 합니다. .
구체적인 코드는 작성하지 않겠습니다.
　1. URL을 사용하여 값을 전달합니다.
2. 상위 페이지 또는 하위 페이지는 숨겨진 도메인을 생성하여 하위 페이지가 획득할 주소를 동적으로 저장합니다.
　3. 서브 페이지에서 개체 개체를 재설정하려면 ① 방법을 사용하십시오.
4. window.open과 같은 다른 방법은 거리가 멀고 권장되지 않습니다.
이 시점에서 비디오 전환 삽입 및 제어가 성공적으로 구현되었습니다. 그런데 우연히 문제를 발견했습니다.
새 동영상으로 전환한 후 어떤 방식으로든 새로고침을 클릭하거나 F5를 눌러 페이지를 새로고침하면 '개체 누락' 스크립트 오류가 팝업됩니다. 오류 코드를 발견했는데 Flash의 내부 스크립트 오류였습니다.

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

Flash가 설치된 페이지에서 사용되는 경우 flash.external.ExternalInterface.addCallback 메서드가 Flash에서 사용됩니다. 웹 페이지를 새로 고칠 때 __flash__removeCallback의 js 오류가 보고됩니다. 객체 누락(53행), (Jscript- 스크립트 블록). 이 함수의 호출 위치는 다음과 같습니다.

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

분명히 document.getElementById("")는 여기서 null을 반환합니다. __flash__removeCallback을 사용하여 오류를 보고합니다. 저는 개인적으로 플래시의 내장 메서드를 다음과 같이 작성해야 한다고 생각합니다.

function __flash__removeCallback(instance, name) {
if (instance != null) { 인스턴스 [name] = null }
}

여기서 document.getElementById("")가 플래시 컨트롤 개체의 id/name 속성을 가져오기 위한 것임을 테스트한 결과 이 ​​오류가 발생했습니다. Object./name 속성에 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>
로그인 후 복사


Simplified version 2: Super simple

코드는 다음과 같습니다.

<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>
로그인 후 복사

HTML 페이지 삽입 동영상 및 JS 컨트롤 전환 동영상 예시에 대한 자세한 예시는 PHP 중국어 웹사이트를 참고하세요. 관련 기사!

관련 라벨：
HTML 嵌入视频 切换视频
원천：php.cn
이전 기사：HTML 메타 뷰포트 속성 상세 설명 분석 다음 기사：입력 시 id와 name 속성의 차이에 대한 소개 및 분석 예시
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
3
2166
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
11
2316
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1950
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1829
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1880
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿