h5에서 새로운 태그 오디오 및 비디오 사용-H5 튜토리얼-php.cn

h5에서 새로운 태그 오디오 및 비디오 사용

灭绝师太

풀어 주다： 2021-10-27 19:15:46

원래의

3968명이 탐색했습니다.

웹페이지에 오디오 리소스를 추가하라는 요청을 받으면 어떻게 구현하시겠습니까?

h5가 등장하기 전에는 iframe 요소를 사용하여 웹 페이지에 비디오 리소스를 삽입할 수 있었습니다. 코드는 다음과 같이 구현되었습니다.

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Document</title>
        </head>
        <body>
            <iframe height=498 width=510 src=&#39;http://player.youku.com/embed/XMzIzNTc0MTAwMA==&#39; frameborder=0 &#39;
            allowfullscreen&#39;></iframe>
        </body>
    </html>

로그인 후 복사

효과는 다음과 같습니다.

h5에서 새로운 태그 오디오 및 비디오 사용

또한 Ht ml5audio를 사용할 수도 있습니다. video 태그를 사용하여 오디오 미디어 리소스를 웹 페이지에 도입하여 웹 페이지의 풍부함을 높일 수도 있습니다.

오디오 태그의 효과는 브라우저마다 다릅니다.

h5에서 새로운 태그 오디오 및 비디오 사용

많은 세련된 웹사이트에서 동영상을 제공하지만,

아직까지는 웹 페이지에 동영상을 표시하려는 사람이 없습니다. 기준. 오늘날 대부분의 비디오는 Flash와 같은 플러그인을 통해 표시됩니다. 그러나 모든 브라우저에 동일한 플러그인이 있는 것은 아닙니다.

h5에서 새로운 태그 오디오 및 비디오 사용

HTML5는 video 요소를 통해 비디오를 포함하는 표준 방법을 지정합니다. 그리고 video 요소는 HTML에서 전역 속성(class, id, title, style 등)과 이벤트 속성(onresize, onredo 등)을 지원합니다. 비디오 창 크기도 설정할 수 있습니다

        <!DOCTYPE html>
        <html lang="en">
        
            <head>
                <meta charset="UTF-8">
                <title>h5 audio标签的使用</title>
            </head>
            
            <body>
                <audio controls loop>
                    <source src="bgsound.mp3" />
                    <source src="music.ogg" />
                    您的浏览器版本太低
                </audio> 
            </body>
        
        </html>

로그인 후 복사

재생 주소 전환(일반적으로 매우 선명한 화질과 고화질 사이를 전환하는 데 사용됨, 서로 다른 품질의 비디오 주소는 다름) )

        <!DOCTYPE html>
        <html lang="en">
        
            <head>
                <meta charset="UTF-8">
                <title>Document</title>
            </head>
            
            <body>
            
                <video autoplay controls>
            
                    <source src="movie04.ogg" />
                    <source src="mp4.mp4" />
                    Opps,您的浏览器版本太低,暂不支持该视频的播放~
                </video>
            </body>
        
        </html>

로그인 후 복사

로드 에 삽입 가능 재생 주소의 백업 전환을 위한 여러 소스 요소 첫 번째 비디오가 로드되지 않으면 다음 비디오가 자동으로 로드됩니다.

h5에서 새로운 태그 오디오 및 비디오 사용

    <video src="test.mp4" controls width="400"  style="max-width:90%"></video>

로그인 후 복사

위 내용은 h5에서 새로운 태그 오디오 및 비디오 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

h5에서 새로운 태그 오디오 및 비디오 사용