Detailed explanation of HTML page embedding video and JS control switching video example

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

Copy code

The code is as follows:

The object and embed tags are used together to be compatible with more browsers, but please make sure to keep the same attribute values under the two tags consistent.
PS: For the introduction and usage of the <object> and <embed> 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 so as to achieve the purpose of playing the next video.
At this time, many people can immediately think of using tag name or DOM method 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 was replaced, the video displayed on the page remained the same, which was puzzling.

It turns out that all parameters of the embedded object are initialized when the page is loaded. Only by reloading it can the next video be switched to play. Simply changing its address attribute value does not work. Just like an employee in the company, his address has changed (he has moved), but he is still the same employee and not someone else.
There are two ways I often use to reload it (taking the above code as an example):
①Use JS's obj.innerHTML method to reset the object as a whole.

Copy code

The code is as follows:

/*Function: Dynamically switch video*/
function setvideo(url){
var youku = document.getElementById("youku");
var htmlstr = "<object id='obx' name='obx' width='290' height='260'>";
htmlstr += "<param name='movie' value='"+url+"'></param>";
htmlstr += "<param name='allowFullScreen' value='true'></param>";
htmlstr += "<param name='allowscriptaccess' value='always'></param>";
htmlstr += "<param name='wmode' value='opaque'></param>";
htmlstr += "<embed src='"+url+"' type='application/x-shockwave-flash' allowscriptaccess='always' allowfullscreen='true' wmode='opaque' width='290' height='260'></embed>";
htmlstr += "</object>";
youku.innerHTML = htmlstr;
}

② Place an iframe in the div container so that you can dynamically refresh the page in the iframe without affecting the current parent page.
I won't write the specific code, but 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 method ① to reset the object in the subpage.
4. Other methods such as window.open are roundabout and not recommended.
So far, embedding and controlling video switching have been successfully achieved. But accidentally, I discovered a problem:
After switching to a new video, if you refresh the page in any way, such as clicking Refresh or pressing F5, a "missing object" script error will pop up. Found the error code and found that it was an internal script error of 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, a js error of __flash__removeCallback will be reported when the page is refreshed: object missing (Line 53), (Jscript-scriptblock). This function is called from:

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

Obviously, document.getElementById("") returns null, which causes __flash__removeCallback to report an error. I think 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("") is used to obtain the id/name attribute of the flash control Object. The reason for this error is that the id/name attribute is not set for the Object. There will be no error after setting it. But in fact, my objects all have id/name attributes, so I don't agree with this reason. From this it can be seen that this method of adding id/name can solve the problem for some people, and this is not the only reason causing this problem.

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

Copy code

The code is as follows:

What he meant was: rewriting the script inside flash can solve the current problem, but 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 your overridden function when the time comes. To achieve this goal, he set the function to overwrite the function provided in the flash every 10 milliseconds. This solves the problem. At the same time, he simplified this code to form the following two "versions":
Simplified version 1: Slightly simpler

Copy code

The code is as follows:

Simplified version 2: Super simple

Copy code

The code is as follows:

I thought about it for a while and sorted out my thoughts:
This error occurs when refreshing the page. The process of refreshing the page is the destruction of the old page and the reloading of the new page. Theoretically, there should be no problem in reloading the new page, so the error occurs during the "aftermath" work before the old page disappears. I can achieve the same purpose by rewriting the callback function inside the flash before the page disappears. The code is as follows and the test passes.

Copy code

The code is as follows:

/*Solve the internal script error of video switching*/
<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>

<<: How to create a responsive column chart using CSS Grid layout

Detailed explanation of the idea of implementing dynamic columns in angularjs loop object properties

Detailed explanation of HTML page embedding video and JS control switching video example

Detailed explanation of the idea of implementing dynamic columns in angularjs loop object properties

Web realizes the code of popping up the window of uploading files by clicking the picture

Tutorial on how to install and use Ceph distributed software under Linux

Let’s talk about the symbol data type in ES6 in detail

Using vue3 to imitate the side message prompt effect of Apple system

Summary of common optimization operations of MySQL database (experience sharing)

Pay attention to the use of HTML tags in web page creation

Summary of some thoughts on binlog optimization in MYSQL

jQuery realizes the scrolling effect of table row data

How to install and use Ubuntu Docker

Recommend

Bootstrap realizes the effect of carousel

CSS3 realizes text relief effect, engraving effect, flame text

The difference between Readonly and Disabled

React Router V6 Updates

MySQL chooses the appropriate data type for id

A brief discussion on whether CSS animation will be blocked by JS

Detailed steps to upgrade mysql8.0.11 to mysql8.0.17 under win2008

How to deploy SpringBoot project using Docker

Use Visual Studio Code to connect to the MySql database and query

How to use mysql index merge

Enable sshd operation in docker

Use of Docker image storage overlayfs

CentOS7 installation zabbix 4.0 tutorial (illustration and text)

UrlRewriter caching issues and a series of related explorations

Web Design Tutorial (7): Improving Web Design Efficiency