Example code for h5 video tag usage
HTML video is suitable for HTML 5+ and is used to define video streaming media for online viewing. Here is a brief introduction for the convenience of friends who need it
HTML
<video width ="320" height ="240" src="www.php.cn/movie.ogg" controls="controls">
This is the comment text. If the browser cannot support HTML 5, the text here will be displayed. If supported, the video will be displayed directly and the text will be ignored.
In HTML 4 and before, if you want to embed a video for online viewing in a web page, you generally need to use Flash video streaming, by using
Properties | Value | Description |
---|---|---|
autoplay | autoplay | If this attribute appears, the video will be played as soon as it is ready. |
controls | controls | If this attribute appears, controls will be displayed to the user, such as the play button. |
height | Pixel value | Sets the height of the video player. |
loop | loop | If this attribute appears, playback will start again after the media file completes playback. |
preload | auto/meta/none | Specifies whether to preload the video, possible values: auto - load when the page is loaded Load the entire video meta - only load the metadata when the page loadsnone - 当页面加载后不载入视频 |
* src | 视频地址 | 要播放的视频的 URL,建议使用绝对地址。 |
width | 像素值 | 设置视频播放器的宽度。 |
如何写兼容的视频标签?
由于旧的浏览器和Internet Explorer不支持
<video width="320" height="240" controls> <!-- 兼容 Firefox --> <source src="http://www.jb51.net/ movie.ogg" type="video/ogg" /> <!-- 兼容 Safari/Chrome--> <source src="http://www.jb51.net/ movie.mp4" type="video/mp4" /> <!-- 如果浏览器不支持video标签,则使用flash --> <embed src="http://www.jb51.net/ movie.swf" type="application/x-shockwave-flash" width="320" height="240" allowscriptaccess="always" allowfullscreen="true"></embed> </video>
【相关推荐】
1. 免费h5在线视频教程
2. HTML5 完整版手册
5. IIS的MIME未注册MP4类型,导致无法识别vidoe标签的解决办法
The above is the detailed content of Example code for h5 video tag usage. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics











Click to enter: ChatGPT Tool Plug-in Navigation Collection Some users complained that their computers frequently crashed with the stop code VIDEO DXGKRNL FATAL ERROR. This particular issue occurs only occasionally and has a bugcheck value of 0x00000113, which indicates a violation in the Microsoft DirectX graphics kernel subsystem, as indicated by the bugcheck value. Usually, the error occurs when a corrupt driver interferes with the normal operation of the graphics card's graphics processor. If you're currently struggling with this specific issue, our article will provide you with a variety of high-quality troubleshooting tips. Below you'll find various methods that other users who encountered the exact same error have used successfully. yes

This tutorial shows you how to find specific text or phrases on all open tabs in Chrome or Edge on Windows. Is there a way to do a text search on all open tabs in Chrome? Yes, you can use a free external web extension in Chrome to perform text searches on all open tabs without having to switch tabs manually. Some extensions like TabSearch and Ctrl-FPlus can help you achieve this easily. How to search text across all tabs in Google Chrome? Ctrl-FPlus is a free extension that makes it easy for users to search for a specific word, phrase or text across all tabs of their browser window. This expansion

Over the past few weeks, the most important specifications and the euro prices of the Motorola Razr 50 and the Razr 50 Ultra have been leaked. Now the enormously reliable leaker @MysteryLupin was able to publish the teaser video embedded below, which

H5 refers to HTML5, the latest version of HTML. H5 is a powerful markup language that provides developers with more choices and creative space. Its emergence promotes the development of Web technology, making the interaction and effect of web pages more Excellent, as H5 technology gradually matures and becomes popular, I believe it will play an increasingly important role in the Internet world.

This article will help you quickly distinguish between H5, WEB front-end, large front-end, and WEB full stack. I hope it will be helpful to friends in need!

The Google Pixel 9 Pro and Pro XL are Google's answers to the likes of the Samsung Galaxy S24 Ultra and the Apple iPhone 15 Pro and Pro Max. Daniel Sin on YouTube(watch below) has compared the Google Pixel 9 Pro XL to the iPhone 15 Pro Max with some

When browsing Douyin works, we often see a clock icon behind the tag. So, what exactly is this clock? This article will focus on the discussion of "What is the clock behind the Douyin label", hoping to provide some useful reference for your use of Douyin. 1. What is the clock behind the Douyin label? Douyin will launch some hot topic challenges. When users participate, they will see a clock icon after the tag, which means that the work is participating in the topic challenge and displays the remaining time of the challenge. For some time-sensitive content, such as holidays, special events, etc., Douyin will attach a clock icon after the label to remind users of the validity period of the content. 3. Popular tags: When a tag becomes popular, Douyin will add a clock icon after the tag to indicate that the tag is

Despite the hype surrounding the Qualcomm Snapdragon X Elite, it has been a rather mediocre launch. In our review, we found that the most impressive part of the new Qualcomm Snapdragon X Elite X1E-78-100-powered Asus Vivobook S 15 was the seamlessnes
