Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > Detailed explanation of video embedding in HTML page and JS control switching video example_HTML/Xhtml_Web page production

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

不言
Release： 2018-05-22 14:57:45
Original
3397 people have browsed it

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>
Copy after login

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 and 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; 
}
Copy after login

②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; 
}
Copy after login

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");
Copy after login

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; } 
}
Copy after login

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>
Copy after login

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>
Copy after login

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>
Copy after login

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>
Copy after login


Related labels：
html
source：php.cn
Previous article：What hidden attributes in the form can be submitted with the form_HTML/Xhtml_Web page production Next article：Control the vertical centering of text in HTML text boxes through css_HTML/Xhtml_Web page production
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
PX automatic conversion to REM error  <style>html {   font-size: calc(100vw / 3.75);      }...
From 2024-04-16 09:34:16
0
0
4687
The page suddenly cannot pull css or bootstrap So I'm developing a page, I did part of it yesterday and it worked great, and today I cont...
From 2024-04-06 21:58:04
0
1
800
How to solve the mysterious white space at the bottom of the page in CSS I'm trying to build a simple webpage using Bootstrap and D3, but I don't know how to get r...
From 2024-04-06 20:22:15
0
1
454
How to use laravel components with livewire lazy placeholder I want to add the skeleton of my laravel component inside a livewire3 placeholder What I h...
From 2024-04-06 20:02:10
0
2
543
Top-level method to replace a string with HTML code (generated from an array) Given a string like this...$htmlPattern="Usernameis:#name#andusercompanyis#company#&q...
From 2024-04-06 17:40:41
0
2
410
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template

Public welfare online PHP training，Help PHP learners grow quickly！

About us Disclaimer Sitemap

© php.cn All rights reserved