This article describes in detail how to embed videos on HTML pages and how to use JS to control video switching. For details, refer to the following section. First, the HTML code of the embedded video on the page is:
The Code is as follows:
Here, the object and embed labels are used to be compatible with more browsers, but be sure to keep the same attribute values under the two labels consistent.
PS: AndFor details about the label and its attributes, see the OBJECT and EMBED label document.
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 the label name or DOM to find the value attribute of the preceding param node and the src attribute of the embed node, and use the JS dynamic value assignment to change the address. However, the test showed that although the video address was replaced, the video displayed on the page was not changed, and it was puzzling.
Originally, all the parameters of the embedded object were initialized during page loading. You can switch to the next video for playback only when you reload the object, simply changing its address attribute value does not work. Like an employee in a company, his address has changed (moved), and he is still the employee rather than others.
There are two methods that I often use to reload them (the above code is used as an example ):
① Use the obj. innerHTML method of JS to reset the entire object.
The Code is as follows:
/* Function: dynamically switch the video */
Function setvideo (url ){
Var youku = document. getElementById ("youku ");
Var htmlstr ="";
Htmlstr + ="";
Htmlstr + ="";
Htmlstr + ="";
Htmlstr + ="";
Htmlstr + ="";
Htmlstr + ="";
Youku. innerHTML = htmlstr;
}
② Place an iframe in the p container to dynamically refresh the page in the iframe without affecting the current parent page.
The specific code will not be written. The general ideas are as follows:
1. Use url to pass the value.
2. Create a hidden domain dynamic storage address on the parent page or child page for the Child page to obtain.
3. Use the ① method to reset the object in the subpage.
4. other methods, such as window. open, are far away and not recommended.
So far, the embedded and controlled video switching has been successfully implemented. But accidentally, I found a problem:
After switching to a new video, click Refresh or press F5 or another method to refresh the page. A script error "Object missing" is displayed. Find the error code and find the Internal Flash Script Error:
Function _ flash _ removeCallback (instance, name ){
Instance [name] = null;
}
If flash is used on the page and flash is used in flash. external. externalInterface. when the addCallback method is used to refresh a webpage, the following js error occurs: the object is missing (Line 53) (Jscript-scriptblock ). The function is called:
_ Flash _ removeCallback (document. getElementById (""), "dewprev ");
Obviously, if the return value of document. getElementById ("") is null, the _ flash _ removeCallback error is returned. In my opinion, the built-in method of flash may be written as follows:
Function _ flash _ removeCallback (instance, name ){
If (instance! = Null) {instance [name] = null ;}
}
Someone tested and found that document. getElementById ("") is used to obtain the id/name attribute of the Object of the flash control. This error occurs because the id/name attribute is not set for the Object, so no error will occur after the setting. But in fact, all my objects carry the id/name attribute, so I am not sure why. From this point of view, this add id/name method can solve some people's problems, the cause of this problem is not only this.
After that, I searched for a long time and finally found a solution on a foreign website, written by Dave Smith, I made some improvements on the basis of his code, reducing the pressure on the page to continuously execute code. The provided code is as follows:
The Code is as follows:
