찾다
웹 프론트엔드HTML 튜토리얼HTML 페이지에 비디오를 삽입하고 JS 제어 하에서 비디오를 전환하는 예에 대한 자세한 설명

이 글에서는 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 중국어 웹사이트를 참고하세요. 관련 기사!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
& lt; Progress & Gt의 목적은 무엇입니까? 요소?& lt; Progress & Gt의 목적은 무엇입니까? 요소?Mar 21, 2025 pm 12:34 PM

이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우

& lt; datalist & gt의 목적은 무엇입니까? 요소?& lt; datalist & gt의 목적은 무엇입니까? 요소?Mar 21, 2025 pm 12:33 PM

이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

& lt; meter & gt의 목적은 무엇입니까? 요소?& lt; meter & gt의 목적은 무엇입니까? 요소?Mar 21, 2025 pm 12:35 PM

이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex

뷰포트 메타 태그는 무엇입니까? 반응 형 디자인에 중요한 이유는 무엇입니까?뷰포트 메타 태그는 무엇입니까? 반응 형 디자인에 중요한 이유는 무엇입니까?Mar 20, 2025 pm 05:56 PM

이 기사는 모바일 장치의 반응 형 웹 디자인에 필수적인 Viewport Meta Tag에 대해 설명합니다. 적절한 사용이 최적의 컨텐츠 스케일링 및 사용자 상호 작용을 보장하는 방법을 설명하는 반면, 오용은 설계 및 접근성 문제로 이어질 수 있습니다.

html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소?html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소?Mar 12, 2025 pm 04:05 PM

이 기사는 html5 & lt; time & gt; 시맨틱 날짜/시간 표현 요소. 인간이 읽을 수있는 텍스트와 함께 기계 가독성 (ISO 8601 형식)에 대한 DateTime 속성의 중요성을 강조하여 Accessibilit를 향상시킵니다.

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?Mar 17, 2025 pm 12:20 PM

기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?Mar 17, 2025 pm 12:27 PM

이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까?& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까?Mar 20, 2025 pm 06:05 PM

이 기사는 & lt; iframe & gt; 외부 컨텐츠를 웹 페이지, 공통 용도, 보안 위험 및 객체 태그 및 API와 같은 대안을 포함시키는 태그의 목적.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

안전한 시험 브라우저

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

ZendStudio 13.5.1 맥

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경

MinGW - Windows용 미니멀리스트 GNU

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음