HTML 공유시 동영상 재생 예시에 대한 자세한 설명

零下一度
풀어 주다: 2017-05-15 13:29:51
원래의
1826명이 탐색했습니다.

HTML로 동영상을 재생하는 방법에는 여러 가지가 있습니다.

HTML 비디오(비디오) 재생

인스턴스

rree

문제 및 해결 방법

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

동영상 파일이 모든 브라우저(Internet Explorer, Chrome, Firefox, Safari, Opera) 및 모든 하드웨어(PC, Mac, iPad, iPhone)에서 작동하는지 확인하려면 많은 요령을 알아야 합니다. .

이 장에서는 W3Cschool이 여러분을 위한 문제와 해결책을 요약합니다.

태그 사용

태그는 HTML 페이지에 멀티미디어 요소를 삽입하는 데 사용됩니다.

다음 HTML 코드는 웹 페이지에 포함된 Flash 비디오를 표시합니다.

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240">
  </object> 
</video>
로그인 후 복사
로그인 후 복사

문제

HTML4는 꼬리표. 귀하의 페이지는 인증을 통과할 수 없습니다.

플래시를 지원하지 않는 브라우저에서는 동영상이 재생되지 않습니다.

아이패드와 아이폰에서는 플래시 동영상을 표시할 수 없습니다.

동영상을 다른 형식으로 변환해도 모든 브라우저에서 재생되지는 않습니다.

태그 사용

태그는 HTML 페이지에 멀티미디어 요소를 삽입하는 데 사용됩니다.

다음 HTML 스니펫은 웹 페이지에 포함된 Flash 비디오를 보여줍니다.

<embed src="intro.swf" height="200" width="200">
로그인 후 복사

문제:

브라우저가 Flash를 지원하지 않는 경우, 비디오가 재생되지 않습니다.

iPad와 iPhone은 Flash 비디오를 표시할 수 없습니다.

동영상을 다른 형식으로 변환해도 모든 브라우저에서 재생되지는 않습니다.

HTML5

HTML5

다음 HTML 스니펫은 웹 페이지에 포함된 ogg, mp4 또는 webm 형식의 비디오를 표시합니다.

<object data="intro.swf" height="200" width="200"></object>
로그인 후 복사

문제:

비디오를 다양한 형식으로 변환하세요.

최고의 HTML 솔루션

다음 예에서는 4가지 비디오 형식을 사용합니다. HTML 5

HTML 5 + +

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
Your browser does not support the video tag.
</video>
로그인 후 복사

문제:

동영상을 다양한 형식으로 변환해야 합니다

Youku 해결 방법

HTML로 비디오를 표시하는 가장 쉬운 방법은 Youku와 같은 비디오 웹사이트를 사용하는 것입니다.

웹 페이지에서 동영상을 재생하려면 Youku와 같은 동영상 웹사이트에 동영상을 업로드한 다음 웹 페이지에 HTML 코드를 삽입하여 재생할 수 있습니다. 동영상:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240">
  </object> 
</video>
로그인 후 복사
로그인 후 복사

사용하이퍼링크

如果网页包含指向媒体文件的超链接,大多数浏览器会使用"辅助应用程序"来播放文件。

以下代码片段显示指向 AVI 文件的链接。如果用户点击该链接,浏览器会启动"辅助应用程序",比如 Windows Media Player 来播放这个 AVI 文件:

实例

<a href="intro.swf">Play a video file</a>
로그인 후 복사

关于内联视频的说明

当视频被包含在网页中时,它被称为内联视频。

如果您打算在 web 应用程序中使用内联视频,您需要意识到很多人都觉得内联视频令人恼火。

同时请注意,用户可能已经关闭了浏览器中的内联视频选项。

我们最好的建议是只在用户希望看到内联视频的地方包含它们。一个正面的例子是,在用户需要看到视频并点击某个链接时,会打开页面然后播放视频。

【相关推荐】

1. 特别推荐“php程序员工具箱”V0.1版本下载

2. 免费html在线视频教程

3. php.cn原创html5视频教程

위 내용은 HTML 공유시 동영상 재생 예시에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿