Detailed explanation of examples of embedding videos in HTML pages and switching videos under JS control

This article introduces in detail how to embed videos in HTML pages and how to use JS to control switching videos. The details are as follows. You can refer to them. First, the HTML code to embed the video in the page is:

The code is as follows:

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

Among them, the object and embed tags are used at the same time to be compatible with more browsers , but please be careful to keep the same attribute values ​​consistent under the two tags.
PS: For an introduction and usage of the

The code is as follows:

/*功能：动态切换视频*/ 
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; 
}

②Place an iframe in the p container, so that the page in the iframe can be dynamically refreshed without affecting the current parent page.
I won’t write the specific code. The general idea is:
1. Use url to pass value.
　2. The parent page or child page creates a hidden domain dynamic storage address for the child page to obtain.
　3. Use the ① method to reset the object object in the subpage.
　4. Other methods such as window.open are far away and are not recommended.
At this point, embedding and controlling video switching have been successfully implemented. But inadvertently, I discovered a problem:
After switching to a new video, if you click refresh or press F5 to refresh the page in any way, a "missing object" script error will pop up. Found the error code and found that it was an internal script error in Flash:

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

If used in the page Flash is installed, and the flash.external.ExternalInterface.addCallback method is used in flash. When refreshing the web page, a js error of __flash__removeCallback will be reported: missing object (Line 53), (Jscript-scriptblock). The calling place of this function is:

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

Obviously, document.getElementById("") here returns null. Will cause __flash__removeCallback to report an error. I personally think that the built-in method of flash should probably be written like this:

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

Someone tested and found that document.getElementById("") here is to get the id/name attribute of the flash control Object. The reason why this error occurs is because the id is not set for the Object. /name attribute, there will be no errors after setting it. But in fact, all my objects have id/name attributes, so I don't agree with this reason. From this point of view, this method of adding id/name can solve some people's problems, and this is not the only cause of this problem.

After that, I searched hard for a long time and finally found a solution on a foreign website. It was written by a person named Dave Smith. I made some improvements based on his code to reduce This reduces the pressure on the page to continuously execute code. The code he provided is as follows:

The code is as follows:

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

What he basically means is: rewriting this script inside flash can solve the current problem, but when object Sometime after the object is loaded, the script inside flash will overwrite the function you rewrote. Therefore, there is no guarantee that the player will call the function you rewrite when the time comes. In order to achieve this goal, he set the function to override the function provided inside flash every 10 milliseconds. This problem is solved. At the same time, he simplified this code to form the following two "versions":
Simplified version one: slightly simplified

The code is as follows:

<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 Two: Super simple

The code is as follows:

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

I thought for a while and rationalized my thoughts:
This error occurred when refreshing the page , the process of page refresh is the death of the old page and the reloading of the new page. In theory, there will be no problem in reloading the new page, so the error occurs in the "aftercare" work before the old page dies. I can achieve the same purpose as long as I rewrite the callback function inside the flash before the page dies. The code is as follows and the test passes.

The code is as follows:

/*解决视频切换内部脚本错误*/ 
<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>

For more detailed examples of video embedding in HTML pages and JS control switching videos, please pay attention to the PHP Chinese website for related articles!