Detailed explanation of video embedding in HTML page and JS control switching video example_HTML/Xhtml_Web page production

First, the HTML code to embed the video in the page is:

Copy the code

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, using the object and embed tags at the same time is to be compatible with more browsers, but please pay attention to keeping the same attribute values ​​​​under the two tags consistent.
PS: For the introduction and usage of the 273238ce9338fbb04bee6997e5552b95 and d8e2720730be5ddc9c2a3782839e8eb6 tags and their attributes, please refer to the article OBJECT and EMBED tags.

Then, let’s talk about how to use JS to dynamically change the address of the embedded video to play the next video.
At this time, many people can immediately think of using tag names or DOM methods to find the value attribute of the above param node and the src attribute of the embed node, and use JS dynamic assignment to change the address. However, the test found that although the video address had been replaced, the video displayed on the page remained unchanged, which was puzzling.

It turns out that all the parameters of the embedded object are initialized when the page is loaded. Only by reloading it can the switch to the next video be played. Simply changing its address attribute value is not affordable. Functional. Just like an employee of the company, his address has changed (moved), he is still the original employee and not someone else.
There are two methods I often use to reload it (take the above code as an example):
① Use JS’s obj.innerHTML method to reset the entire object object.

Copy the code

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 to dynamically store the 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 unintentionally, I discovered a problem:
After switching to a new video, clicking refresh or pressing F5 or any other method to refresh the page will cause a "missing object" script error to pop up. I found the error code and found that it was an internal script error in Flash:

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

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

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

Obviously, document.getElementById("") here returns null, which will cause __flash__removeCallback to report an error. I personally think that the built-in method of flash should 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/name is not set for the Object. Properties, there will be no errors after setting them. 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, which reduced the number of pages. Pressure to execute code. The code he provided is as follows:

Copy code

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 means is roughly: rewriting this script inside flash can solve the problem The current problem is that at some point 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 simpler

Copy the code

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

Copy code

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 occurs when refreshing the page. The process of page refreshing 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 only need to rewrite the callback function inside the flash before the page dies, and the same purpose can be achieved. The code is as follows, and the test passes.

Copy the code

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>