The 16th lesson: some wonderful elements node Object,video

object element

This element of object, which is rarely used by the front-end, but like flash,svg and other exotic elements, must be nested within the object element. Modern browsers replace these elements with Video,canvas.

There have been some applications of charts and maps, such as Highchart,e-chart, which are basically generated using SVG elements (nested within the object element), which can be seen to be of no use to ignore. IE7 and the following version of the browser are using VML.

Before HTML5 's video tag came out, we basically loaded the video or other multimedia resources by object,embed,applet these three tags.

The applets were basically eliminated, and during my studies, I used applets to screen-share functions. This applet is a Java thing, cross-platform. Seems to be because of security problems, coupled with slow speed, the consumption of resources, and slowly be eliminated.

If you just want to insert Flash video, without JS interaction, embed tag is enough. The embed label has now become the HTML5 specification. <embed> tags define embedded content, such as plugins.

The embed element is used to insert plug-ins that conform to the Netscape plug-in application programming interface specification in an HTML document. We all know that at that time ie Cow B is very, can not use other people's specifications, he wants to be a monopoly, therefore, the use of ActiveX instead of the Netscape plug-in application programming interface specification. The main technology for ActiveX is the Component Object Model (COM), which uses the object tag to load COM components. Everyone knows that IE7 and the following versions of Ajax objects are using COM components. Because IE7 and the following versions of the garbage collection mechanism use a referral mechanism, it is easy to cause memory leaks. To load COM, Microsoft added two properties to the OBJEC tag: ClassID and CodeBase.

Mainstream browsers, including IE, support object,embed tags, except that each browser supports different levels of support. Therefore, when writing compatibility of other resources or plug-in embedding, support for object using object embedding, not supported by the use of embed embedding.

CLASSID is the ID value that this COM component registers in the system, and with this ID value system to find the corresponding DLL file for this COM component.

CodeBase is a URL that is used to download and update components. For example, when browsing a webpage, found that the component is not installed on your machine, IE (some browsers do not support this feature, need to download manually) will go to the URL of the codebase instructions to download the component, a new version will also prompt you to install a new version.

There are several points to note for object use:

(1) It must be created dynamically using means such as innerHTML or document.write (). Created by document.createelement This standard API, we cannot load our resources.

(2) When you create a param (a child element of object that is used to load a resource, object is the entire parent element, equivalent to HTML), you must specify the Name property, otherwise param creation is unsuccessful.

For example: div.innerhtml = "<object><param></object>"; alert (div.innerhtml)//<object></object >

div.innerhtml = "<object><param name=test></object>"; alert (div.innerhtml)//<OBJECT>< PARAM name= "test" value= "" ></OBJECT>

(3) IE8 and the following version of the browser with getElementsByTagName ("*"), can not be taken to Param elements. Only through getElementsByTagName ("param")

(4) in Chrome, if an object element has a background-image style in front of it, the object does not appear, and the behavior occurs several times. You can use the EMBED tag instead of object to resolve.

(5) The OnError event of the object tag under IE is useless, even if it is loaded incorrectly, it will trigger the onload callback.

Video element

Video and canvas are the most important two tags in HTML5, which break the monopoly of flash on video and graphics processing. Because Apple's iOS platform iphone doesn't support Flash, HTML5 is growing faster.

HTML5 introduces a video:

<video src= "My.mp4" Controls AutoPlay width= "height=" ></video>

Because our videos are available in a variety of formats, such as Avi,rm,rmvb,mp4, they need to be handled with different decoders. Each browser comes with a different decoder, so each browser supports a different video format. In order to achieve the compatibility of the code, the source tag is introduced, which is used to link video files in different formats.

Like what:

<video id= "Video" Controls preload= "None" poster= "Http://poster.png" >

<source id= "mp4" src= "Http://trailer.mp4" type= "Video/mp4" >

<source id= "WEBM" src= "HTTP://TRAILER.WEBM" type= "VIDEO/WEBM" >

<p>your User Agent does not support the HTML5 video element.</p>

</video>

The browser Will Self-monitor which video format is supported by the decoder, and then the corresponding playback, if not supported, will display the words inside the P element.

In addition, the subtitles above the video, we can be implemented with the trace label, so HTML5 video playback, the actual use of more than one label.

Because IE6-IE8 does not support video, it also requires the OBJECT tag to load the Flash player.

Vidoe tags There are many properties, I mainly talk about a few unusual:

Poster: The user specifies a picture, such as a preview image. Displayed when the current video is loading or the video address is incorrect.

Preload: There are three selected values: Auto, when the page loads, loads the entire video. metadata, when the page loads, load the metadata (the total length of the video, the first frame screen). None, when the page loads, the video is not loaded. If you specify the AutoPlay property, this property is ignored because the AutoPlay property causes the browser to play the video when the page loads.

Crossorigin: Cross-domain issues are involved if video files are serviced in different domains. This property can play a cross-domain resource. Video,audio,img can be played across domains.

Canplaytype method: Detects whether the browser supports this type of video. Instead of returning a Boolean, it returns the following three values: Probably, the browser confirms that your incoming video format is supported. Maybe, browser or support your video format. "" Empty string, your browser confirms that your incoming video format cannot be supported.

Now the browser mainly around three kinds of format melee:

(1) MP4: Using H264 video, AAC audio

(2) WebM: Using VP8 video, Vorbis audio

(3) Ogg: Using Theora video and Vorbis audio

mp4,h264 video codecs and AAC audio codecs are proprietary formats for MPEG patents and are not free. I have learned about this thing in flex, mainly used in flash, the effect is good, but this charge of things will not last.

WEBM is Google in order to promote the development of HTML5, its own home codec format open source, is really a great company. When we generate a recording file, we typically generate a video file in this format that can be played directly in the Chrome browser. This format is driven by Google and I believe there will be a bigger share in the future.

Ogg is a very small codec format, it produces files, the same length of time, but the size of the file is 10 times times smaller than the other formats, or even larger. However, there may be less use in environments where the quality of sound and video requirements are higher.

To sum up, if we need to embed a video on our web page, we can use the source tag to introduce these three formats, while working with the Flash Player of the object tag, compatible with the low version of IE browser.

One more thing to note: The full screen of the video and the cancellation of full-screen operation need to be valid in the event callback. For example: Click the button, and then in the callback method, call Video.requestfullscroll (), the browser will be full-screen video.

Compatibility: On ipad, the video menu does not have a volume control bar, and you cannot adjust it via the volume property, only with your ipad hardware button +,-to control the volume.

Come on!

The 16th lesson: some wonderful elements node Object,video