Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > Detailed explanation of examples of embedding videos in HTML pages and switching videos under JS control

Detailed explanation of examples of embedding videos in HTML pages and switching videos under JS control

高洛峰
Release： 2017-03-06 16:57:59
Original
2320 people have browsed it

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


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


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


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


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

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!

Related labels：
HTML 嵌入视频 切换视频
source：php.cn
Previous article：HTML meta viewport attribute detailed description analysis Next article：Example introduction and analysis of the difference between id and name attributes in input
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
function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
From 2024-04-29 11:01:01
0
3
2052
How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
11
2206
The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
From 2024-04-19 15:37:47
0
1
1862
There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
From 2024-04-18 23:52:34
0
1
1749
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
1772
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