Zero-based HTML Tutorial (6): Knowledge of hyperlinks and HTML5 play video

Source: Internet
Author: User

One, how to link to other pages?

A hyperlink is a connection to a target from a Web page that can be another page, a different location on the same page, a picture, an e-mail address, a file, or even an application. An object that is used to hyperlink in a Web page can be a piece of text or a picture . When a viewer clicks on a text or picture that has been linked, the link target appears on the browser and is opened or run according to the type of target.

HTML inserts <a> tags can be added to the hyperlink, the specific format is such <a href= "url" >XXX</a>. where the href attribute sets the target of the hyperlink link. The text between the start tag and the end tag is the hyperlink itself, the page can click on the text link to the specific address, the mouse moved to the top of the text, the mouse pointer will become stretched out the hand of the index finger.

<a href= "url" >XXX</a> the middle is not necessarily text, insert a tag can realize click on the image link to other pages of the effect.

Second, open the link in a new window

Students if you try to do a few hyperlinks and click on a few times will find that the new page is not in our usual online click on the link to enter a new page of the way open, but directly in the current page loaded with a new page, very inconvenient. Add a target attribute to the <a> label for the hyperlink, set to "_blank",<a href= "video.html" target= "_blank" > , click on the new page will open the link!

Iii. Insert Video in HTML5

Hyperlinks we already have, now do it. Click the hyperlink to go to the video playback page. Today most Web pages are made by Flash to achieve video playback, and HTML5 also provides standard methods <video> tags for video playback. <video src= "Movie.mp4" controls= "Controls" > your browser does not support playback of this video </video> this src attribute sets the path of the videos (similar to the picture), The Controls property provides add playback, pause, and volume controls, and the text in the middle of the label is the text that appears when the browser is unable to play the video.

1. Add a hyperlink to a newly created page, linked to a new page:

<div>

<a href= "video.html" target= "_blank" > Video playback </a>

</div>

2. New page to add video playback <video> Tags:

<video src= "Video.mp4" controls> your browser does not support playing this video </video>

Done! A simple video playback page is made. This time I learned a very important hyperlink knowledge as well as HTML5 new insert video features, please look forward to the next tutorial.

Attached: Video has the following attributes:

AutoPlay AutoPlay If this property appears, the video plays immediately after it is ready

Controls controls if this property appears, the control is displayed to the user, such as the play button

Height pixels set the video player heights

Loop loop If this property occurs, it starts playing again when the media file finishes playing

Preload preload If this property occurs, the video is loaded on page load and is ready to play, if "autoplay" is used, the property is ignored

src URL The URL of the video to play

Width pixels Set the video player widths

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.