웹 프론트엔드 H5 튜토리얼 h5 비디오 태그 사용에 대한 예제 코드

h5 비디오 태그 사용에 대한 예제 코드

May 15, 2018 am 10:30 AM
h5 video 상표

HTML 비디오는 HTML 5+에 적합하며 온라인 보기를 위한 비디오 스트리밍 미디어를 정의하는 데 사용됩니다.

HTML이 필요한 친구들의 편의를 위해 간략하게 소개합니다.

<video 
width
="320" 
height
="240" src="www.php.cn/movie.ogg" controls="controls">
로그인 후 복사

브라우저가 HTML 5를 지원하지 않는 경우 여기에 있는 텍스트가 표시됩니다. 지원되는 경우 비디오가 직접 표시되고 텍스트는 무시됩니다.

HTML 4 이전에서는 온라인으로 보기 위해 웹 페이지에 비디오를 삽입하려면 일반적으로 <를 사용하여 Flash 비디오 스트리밍을 사용해야 합니다. ;object> 및 태그를 사용하면 브라우저를 통해 swf, flv 및 기타 형식의 비디오 파일을 재생할 수 있지만 전제는 브라우저가 타사 플러그인인 Adobe Flash Player를 설치해야 한다는 것입니다. 최신 스마트폰과 아이패드는 일반적으로 Flash를 지원하지 않으므로 웹에서 비디오를 탐색할 수 없습니다. HTML 5에서는 이러한 사실이 바뀌었습니다. 웹 개발자는 타사 플러그인 없이 비디오 파일을 쉽게 로드하기 위해

속성설명
자동재생autoplay이 속성이 있으면 동영상이 준비되는 즉시 재생됩니다.
컨트롤컨트롤이 속성이 나타나면 플레이 컨트롤이 사용자에게 표시됩니다. 🎜> 버튼.
높이픽셀 값 동영상 플레이어의 높이를 설정합니다.
looploop이 속성이 나타나면 미디어 파일 재생이 끝난 후 재생이 다시 시작됩니다.
preloadauto/meta/none동영상을 미리 로드할지 여부를 지정합니다. 가능한 값은 다음과 같습니다.
auto - 페이지가 로드될 때 로드 로드됨 전체 동영상
메타 로드 - 페이지가 로드될 때 메타데이터만 로드
none - 当页面加载后不载入视频
* 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 完整版手册

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

4. H5 video标签只能放声音不能放视频的解决办法

5. IIS的MIME未注册MP4类型,导致无法识别vidoe标签的解决办法

위 내용은 h5 비디오 태그 사용에 대한 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 채팅 명령 및 사용 방법
4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Windows 11에서 VIDEO DXGKRNL 치명적인 오류를 수정하는 방법 Windows 11에서 VIDEO DXGKRNL 치명적인 오류를 수정하는 방법 Apr 13, 2023 pm 08:22 PM

입력하려면 클릭하세요: ChatGPT 도구 플러그인 탐색 컬렉션 일부 사용자는 중지 코드 VIDEO DXGKRNL FATAL ERROR로 인해 컴퓨터가 자주 충돌한다고 불평했습니다. 이 특정 문제는 가끔씩만 발생하며 버그 검사 값이 0x00000113입니다. 이는 버그 검사 값으로 표시된 대로 Microsoft DirectX 그래픽 커널 하위 시스템의 위반을 나타냅니다. 일반적으로 이 오류는 손상된 드라이버가 그래픽 카드 그래픽 프로세서의 정상적인 작동을 방해할 때 발생합니다. 현재 이 특정 문제로 어려움을 겪고 있다면 당사의 문서에서 다양한 고품질 문제 해결 팁을 제공할 것입니다. 아래에는 동일한 오류가 발생한 다른 사용자가 성공적으로 사용한 다양한 방법이 나와 있습니다. 예

Chrome 및 Edge의 모든 탭에서 텍스트를 검색하는 방법 Chrome 및 Edge의 모든 탭에서 텍스트를 검색하는 방법 Feb 19, 2024 am 11:30 AM

이 튜토리얼에서는 Windows의 Chrome 또는 Edge에서 열려 있는 모든 탭에서 특정 텍스트나 문구를 찾는 방법을 보여줍니다. Chrome에 열려 있는 모든 탭에서 텍스트 검색을 수행하는 방법이 있습니까? 예, Chrome의 무료 외부 웹 확장 프로그램을 사용하면 수동으로 탭을 전환하지 않고도 열려 있는 모든 탭에서 텍스트 검색을 수행할 수 있습니다. TabSearch 및 Ctrl-FPlus와 같은 일부 확장 기능을 사용하면 이를 쉽게 달성할 수 있습니다. Chrome의 모든 탭에서 텍스트를 검색하는 방법은 무엇입니까? Ctrl-FPlus는 사용자가 브라우저 창의 모든 탭에서 특정 단어, 문구 또는 텍스트를 쉽게 검색할 수 있게 해주는 무료 확장 프로그램입니다. 이번 확장

h5은 무슨 뜻인가요? h5은 무슨 뜻인가요? Aug 02, 2023 pm 01:52 PM

H5는 HTML의 최신 버전인 HTML5를 말하며, H5 기술과 마찬가지로 개발자에게 더 많은 선택권과 창의적인 공간을 제공하는 강력한 마크업 언어입니다. 점차 성숙해지고 대중화되면서 인터넷 세계에서 점점 더 중요한 역할을 담당하게 될 것이라고 믿습니다.

Motorola Razr 50 Ultra는 방수 케이스와 거대한 보조 디스플레이를 갖춘 유출된 티저 영상에 등장합니다. Motorola Razr 50 Ultra는 방수 케이스와 거대한 보조 디스플레이를 갖춘 유출된 티저 영상에 등장합니다. Jun 20, 2024 pm 09:31 PM

지난 몇 주 동안 Motorola Razr 50과 Razr 50 Ultra의 가장 중요한 사양과 유로 가격이 유출되었습니다. 이제 엄청나게 신뢰할 수 있는 유출자 @MysteryLupin이 아래에 포함된 티저 비디오를 게시할 수 있게 되었습니다.

트래픽을 유도하기 위해 Douyin에 태그를 추가하는 방법은 무엇입니까? 플랫폼에서 트래픽을 가장 쉽게 유도할 수 있는 태그는 무엇입니까? 트래픽을 유도하기 위해 Douyin에 태그를 추가하는 방법은 무엇입니까? 플랫폼에서 트래픽을 가장 쉽게 유도할 수 있는 태그는 무엇입니까? Mar 22, 2024 am 10:28 AM

인기 있는 짧은 비디오 소셜 플랫폼인 Douyin은 엄청난 사용자 기반을 보유하고 있습니다. Douyin 창작자에게 태그를 사용하여 트래픽을 유도하는 것은 콘텐츠 노출을 늘리고 관심을 끄는 효과적인 방법입니다. 그렇다면 Douyin은 어떻게 태그를 사용하여 트래픽을 유도합니까? 이 기사에서는 이 질문에 대해 자세히 답변하고 관련 기술을 소개합니다. 1. Douyin에 태그를 추가하여 트래픽을 유도하는 방법은 무엇입니까? 동영상을 게시할 때 콘텐츠와 관련된 태그를 선택하세요. 이러한 태그는 사용자가 태그를 통해 동영상을 더 쉽게 찾을 수 있도록 동영상의 주제와 키워드를 포함해야 합니다. 인기 해시태그를 활용하는 것은 동영상 노출을 높이는 효과적인 방법입니다. 현재 인기 있는 태그와 트렌드를 조사하고 이를 동영상 설명과 태그에 통합하세요. 이러한 인기 태그는 일반적으로 가시성이 더 높으며 더 많은 시청자의 관심을 끌 수 있습니다. 3. 라벨

TikTok 라벨 뒤에 있는 시계는 무엇인가요? Douyin 계정을 태그하는 방법은 무엇입니까? TikTok 라벨 뒤에 있는 시계는 무엇인가요? Douyin 계정을 태그하는 방법은 무엇입니까? Mar 24, 2024 pm 03:46 PM

Douyin 작품을 탐색할 때 태그 뒤에 시계 아이콘이 표시되는 경우가 많습니다. 그렇다면 이 시계는 정확히 무엇일까요? 이 기사에서는 Douyin 사용에 유용한 참고 자료를 제공하기 위해 "Douyin 레이블 뒤에 있는 시계"에 대한 논의에 중점을 둘 것입니다. 1. Douyin 라벨 뒤에 있는 시계는 무엇인가요? Douyin은 몇 가지 인기 주제 챌린지를 시작합니다. 사용자가 참여하면 태그 뒤에 시계 아이콘이 표시됩니다. 이는 해당 작품이 주제 챌린지에 참여하고 있음을 의미하며 챌린지의 남은 시간을 표시합니다. 휴일, 특별 이벤트 등과 같이 시간에 민감한 일부 콘텐츠의 경우 Douyin은 라벨 뒤에 시계 아이콘을 첨부하여 사용자에게 콘텐츠의 유효 기간을 상기시킵니다. 3. 인기 태그: 태그가 인기를 얻으면 Douyin은 태그 뒤에 시계 아이콘을 추가하여 태그가 인기가 있음을 나타냅니다.

H5, WEB 프론트엔드, 빅 프론트엔드, WEB 풀스택을 어떻게 구별하나요? H5, WEB 프론트엔드, 빅 프론트엔드, WEB 풀스택을 어떻게 구별하나요? Aug 03, 2022 pm 04:00 PM

이 글은 H5, WEB 프론트엔드, 대형 프론트엔드, WEB 풀스택을 빠르게 구별하는 데 도움이 될 것입니다. 도움이 필요한 친구들에게 도움이 되길 바랍니다!

Snapdragon X Elite CPU 성능은 Vivobook S15 벤치마크에서 배터리 및 플러그인 상태에서 거의 동일합니다. Snapdragon X Elite CPU 성능은 Vivobook S15 벤치마크에서 배터리 및 플러그인 상태에서 거의 동일합니다. Jun 20, 2024 pm 03:59 PM

Qualcomm Snapdragon X Elite를 둘러싼 과대 광고에도 불구하고 다소 평범한 출시였습니다. 리뷰에서 새로운 Qualcomm Snapdragon X Elite X1E-78-100 기반 Asus Vivobook S 15의 가장 인상적인 부분은 매끄러운 부분이라는 것을 발견했습니다.

See all articles