웹사이트를 탐색할 때 웹사이트에 동영상, 오디오 등이 있다는 것을 발견한 적이 있나요? HTML, CSS를 배우고 있는 친구들, HTML5를 사용하여 페이지에 동영상을 삽입하고 자동으로 재생하는 방법을 알고 있나요? 이 글에서는 HTML5에 동영상을 삽입하는 방법과 HTML에 동영상을 삽입하는 코드에 대해 설명합니다. 관심 있는 친구들은 이를 참고할 수 있습니다.
HTML5의 태그는 동영상을 삽입할 수 있으며 동영상의 재생, 일시중지, 볼륨 조정 등을 제어할 수도 있습니다. 필요에 따라 비디오의 길이, 너비, 높이를 설정할 수도 있습니다. 비디오의 너비와 높이를 설정하지 않으면 페이지 표시 크기가 비디오 크기에 따라 결정됩니다. 참고: 및 태그는 비디오 태그를 지원하지 않는 브라우저에 콘텐츠를 표시하는 데 사용됩니다.
비디오 삽입과 관련된 태그 소개:
비디오 리소스를 설정하는 데 사용
참고:
브라우저에서
태그의 호환성은 다음과 같습니다.
: 방법 html5 비디오를 사용하여 페이지에 삽입하려면 자세한 예: 먼저 비디오 태그를 만들고, 비디오 길이를 300px로, 높이를 200px로 설정한 다음 삽입해야 할 동영상을 소개하고, 참조 파일의 경로에 주의하세요. 구체적인 코드는 다음과 같습니다. ：
<video width="300" height="200" controls>
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video> 로그인 후 복사
Rendering:
구문:
페이지에서 자동으로 재생할 수 있는 동영상 삽입 동영상의 경우 태그의 자동 재생 속성인 하나만 추가하면 됩니다. HTML에서 태그에 추가하면 동영상의 자동 재생 효과를 얻을 수 있으며 모든 주요 브라우저는 자동 재생 속성을 지원합니다. 구체적인 코드는 다음과 같습니다.
<video width="320" style="max-width:90%" controls autoplay>
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video> 로그인 후 복사
HTML에 태그의 autoplay 속성을 추가한 후 페이지를 열거나 새로 고칠 때 동영상이 자동으로 재생됩니다. 위에서는 페이지에 동영상을 삽입하는 HTML5 방식과 자동 재생이 가능한 동영상을 삽입하는 방법을 소개하고 있으며, 설명이 비교적 자세하고 이해하기 쉽습니다. 초보자는 직접 시도해 보고 비디오를 찾아 페이지에 삽입할 수 있습니다. 귀하의 코드가 자동 재생 효과를 얻을 수 있는지 확인하세요. 이 기사가 도움이 되기를 바랍니다.
【추천 관련 튜토리얼】
1. Html5 비디오 튜토리얼
2. HTML 개발 매뉴얼 부트스트랩 튜토리얼
위 내용은 HTML5를 사용하여 자동 재생 비디오를 페이지에 삽입하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
