HTML 비디오(동영상)
HTML로 비디오를 재생하는 것은 쉽지 않습니다!
동영상 파일이 모든 브라우저(Internet Explorer, Chrome, Firefox, Safari, Opera)와 모든 하드웨어(PC, Mac, iPad, iPhone )을 재생할 수 있습니다.
이 장에서는 PHP 중국어 웹사이트(php.cn)에서 문제와 해결 방법을 요약합니다.
<embed> 태그 사용
<embed> 태그는 HTML 페이지에 멀티미디어 요소를 삽입하는 데 사용됩니다.
다음 HTML 코드는 웹 페이지에 포함된 Flash 비디오를 표시합니다.
예
<!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>
다음에서 비디오 찾기 swf 형식, 실행해 보세요
문제
HTML4에서는 < 삽입> 귀하의 페이지는 인증을 통과할 수 없습니다.
플래시를 지원하지 않는 브라우저에서는 동영상이 재생되지 않습니다.
아이패드와 아이폰에서는 플래시 동영상을 표시할 수 없습니다.
동영상을 다른 형식으로 변환해도 모든 브라우저에서 재생되지 않습니다.
<object> 태그 사용
<object> 멀티미디어 요소를 삽입하세요.
다음 HTML 조각은 웹 페이지에 포함된 Flash 비디오를 보여줍니다.
<!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>
문제:
브라우징하는 경우 장치가 Flash를 지원하지 않아 비디오를 재생할 수 없습니다.
iPad와 iPhone은 Flash 비디오를 표시할 수 없습니다.
동영상을 다른 형식으로 변환해도 모든 브라우저에서 재생되지 않습니다.
HTML5 <video> 요소 사용
HTML5 <video> video 또는 video
<video> 요소는 모든 최신 브라우저에서 지원됩니다.
다음 HTML 스니펫은 웹페이지에 포함된 ogg, mp4 또는 webm 형식의 비디오를 표시합니다.
<!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>
위 예에서 일부 비디오 형식을 찾아 프로그램을 실행하여 사용해 보세요.
문제:
동영상을 다양한 형식으로 변환해야 합니다.
<video> 요소는 이전 브라우저에서 유효하지 않습니다.
최고의 HTML 솔루션
다음 예에서는 4가지 비디오 형식을 사용합니다. HTML 5 <video> 요소는 mp4, ogg 또는 webm 형식 중 하나로 비디오를 재생하려고 시도합니다. 둘 다 실패하면 <embed> 요소로 대체됩니다.
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>
위 예에서 일부 비디오 형식을 찾아 프로그램을 실행해 보세요.
문제:
Youku 솔루션
HTML로 비디오를 표시하는 가장 쉬운 방법은 Youku와 같은 비디오 웹사이트를 사용하는 것입니다.
웹 페이지에서 동영상을 재생하려면 Youku와 같은 동영상 웹사이트에 동영상을 업로드한 다음 웹 페이지에 HTML 코드를 삽입하여 동영상을 재생할 수 있습니다.
<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" width="480" height="400" type=" application/x-shockwave-flash"> </embed>
인스턴스
<!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>
프로그램을 실행해 보세요.
하이퍼링크 사용
웹 페이지에 미디어 파일에 대한 하이퍼링크가 포함된 경우 대부분의 브라우저는 "도우미 응용 프로그램"을 사용합니다. " 파일을 재생합니다.
다음 코드 조각은 AVI 파일에 대한 링크를 표시합니다. 사용자가 링크를 클릭하면 브라우저는 Windows Media Player와 같은 "보조 응용 프로그램"을 실행하여 AVI 파일을 재생합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h2>点击这个链接打开查看</h2>
<a href="Uploader.swf">播放视频文件</a>
</body>
</html>
비디오 파일을 찾아서 사용해 보세요
인라인 비디오에 대한 참고 사항
웹 페이지에 비디오가 포함된 경우 이를 인라인 비디오라고 합니다.
웹 애플리케이션에서 인라인 비디오를 사용할 계획이라면 많은 사람들이 인라인 비디오를 불편하게 여긴다는 점을 염두에 두어야 합니다.
또한 사용자가 브라우저에서 인라인 비디오 옵션을 꺼두었을 수도 있다는 점에 유의하세요.
가장 좋은 조언은 사용자가 볼 것으로 예상되는 위치에만 인라인 동영상을 포함하라는 것입니다. 긍정적인 예는 사용자가 비디오를 보아야 할 때 링크를 클릭하면 페이지가 열리고 비디오가 재생되는 경우입니다.
HTML 멀티미디어 태그
HTML5 새 태그.
| 标签 | 描述 |
| <embed> | 定义内嵌对象。HTML4 中不赞成，HTML5 中允许。 |
| <object> | 定义内嵌对象。 |
| <param> | 定义对象的参数。 |
| <audio> | 定义了声音内容 |
| <video> | 定义一个视频或者影片 |
| <source> | 定义了media元素的多媒体资源(<video> 和 <audio>) |
<track> | 规定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>) |
