HTML 비디오(비디오)

HTML 비디오(동영상)

HTML로 비디오를 재생하는 것은 쉽지 않습니다!

동영상 파일이 모든 브라우저(Internet Explorer, Chrome, Firefox, Safari, Opera)와 모든 하드웨어(PC, Mac, iPad, iPhone )을 재생할 수 있습니다.

이 장에서는 PHP 중국어 웹사이트(php.cn)에서 문제와 해결 방법을 요약합니다.

<embed> 태그 사용

다음 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> 태그 사용

다음 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>)

지속적인 학습

새로운 파일

<!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>

제출하다 코드 재설정

자동운전