HTML videos (Videos)
HTML Videos
Playing videos in HTML is not easy!
You need to know a lot of tricks to ensure that your video files work in all browsers (Internet Explorer, Chrome, Firefox, Safari, Opera) and on all hardware (PC, Mac, iPad, iPhone ) can be played.
In this chapter, PHP Chinese website (php.cn) summarizes the problems and solutions for you.
##Use the <embed> tag
The<embed> tag is used to embed multimedia elements in HTML pages. The following HTML code displays a Flash video embedded in a web page:Example
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文网(php.cn)</title> </head> <body> <h2>播放视频</h2> <embed src="Uploader.swf" width="200" height="200"><p>如果你无法看到该视频,那么可能你的电脑不支持该文件格式。</p> </body> </html>Find a video in swf format, RunRunTry it out
Problem
- ##HTML4 does not recognize the <embed> tag. Your page cannot pass verification.
- If the browser does not support Flash, the video will not playback
- iPad and iPhone cannot display Flash videos.
- If you convert the video to other formats, then it still won't play in all browsers.
Use the <object> tag<object> tag is used in HTML pages Embed multimedia elements.
The following HTML snippet shows a Flash video embedded in a web page:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文网(php.cn)</title> </head> <body> <h2>播放视频</h2> <object height="200" width="200" data="Uploader.swf"></object> </body> </html>
Question:
- ##If browsing The device does not support Flash and will not be able to play the video.
- iPad and iPhone cannot display Flash videos.
- If you convert the video to other formats, then it still won't play in all browsers.
Using the HTML5 <video> element ##The HTML5 <video> tag defines a video or video.
<video> element is supported in all modern browsers.
The following HTML fragment will display a video in ogg, mp4 or webm format embedded in a web page:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文网(php.cn)</title> </head> <body> <h2>播放视频</h2> <video width="320" height="240" controls autoplay> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> <source src="movie.webm" type="video/webm"> 您的浏览器不支持视频。 </video> </body> </html>
Find some video formats in the above example and run the program to try it
Problem:You have to convert videos to many different formats. The
<video> element is not valid in older browsers.
The best HTML solutionThe following examples use 4 different video formats. The HTML 5 <video> element attempts to play a video in one of the mp4, ogg, or webm formats. If both fail, fall back to the <embed> element.
HTML 5 + <object> + <embed><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h2>播放视频</h2>
<video width="320" height="240" controls autoplay>
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
<embed width="320" height="240" src="movie.swf">
</object>
</video>
</body>
</html>
Find some video formats in the above example and run the program to try it
Problem:
- #You have to convert the video to many different formats
Youku SolutionThe easiest way to display videos in HTML is to use a video website such as Youku.
If you want to play a video on a web page, you can upload the video to a video website such as Youku, and then insert HTML code into your web page to play the video:
<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" width="480" height="400" type=" application/x-shockwave-flash"> </embed>
##Example
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文网(php.cn)</title> </head> <body> <h2>播放视频</h2> <embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" width="480" height="400" type="application/x-shockwave-flash"> </embed> </body> </html>Try running the program
Using hyperlinks
If a web page contains hyperlinks to media files, most browsers will use "Helper application" to play files. The following code snippet displays a link to an AVI file. If the user clicks the link, the browser will launch a "auxiliary application", such as Windows Media Player, to play the AVI file:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文网(php.cn)</title> </head> <body> <h2>点击这个链接打开查看</h2> <a href="Uploader.swf">播放视频文件</a> </body> </html>Find a video file and try it
A note about inline videos
When a video is included in a web page, it is called an inline video. If you plan to use inline video in a web application, you need to be aware that many people find inline video annoying. Also note that users may have turned off the inline video option in their browser. Our best advice is to only include inline videos in places where users expect to see them. A positive example is when a user needs to see a video and clicks on a link, which opens the page and then plays the video.#HTML Multimedia Tag
HTML5 New Tag.
| Tag | Description |
| <embed> | Define embedded objects. Deprecated in HTML4, allowed in HTML5. |
| <object> | Define embedded objects. |
| <param> | Define the parameters of the object. |
![Front-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Zero-based front-end course [Vue advanced learning and practical application]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![WEB front-end tutorial [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Apipost practical application [api, interface, automated testing, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
