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 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 achieve the purpose of playing 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 the obj.innerHTML method of JS to reset the entire object object.

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!