HTML5 비디오 태그에 대한 자세한 설명-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

HTML5 비디오 태그에 대한 자세한 설명

黄舟

May 19, 2017 pm 05:24 PM

이전 기사에서 Xiaoqiang의 HTML5 모바일 개발 길(5) - 아름다운 비디오 플레이어 만들기, 매우 사용하기 쉬운 플레이어를 만들었습니다. 일부 친구들은 원리에 대해 잘 모릅니다. 이전 기사를 바탕으로

1. 사용 기술

HTML5에서는

<video src="move.mp4"></video>

로그인 후 복사

비디오 태그에는 컨트롤 속성과 같은 많은 속성이 있으며 콘솔 존재 여부를 제어할 수 있습니다.

<video src="move.mp4" controls="controls">  
    浏览器不支持HTML5的视频播放功能  
</video>

로그인 후 복사

위의 비디오 형식에서 다양한 브라우저가 다양한 비디오 형식을 지원한다는 것을 알 수 있으므로 태그를 사용하여 여러 형식으로 비디오를 지정할 수 있습니다. 기본적으로 브라우저는 자동으로 다운로드를 시작합니다. 파일의 유형을 결정합니다.

<video width="400" controls="controls">  
    <source src="move.mp4"  type="video/mp4" />  
    <source src="move.ogg"  type="video/ogg" />  
</video>

로그인 후 복사

2. 비디오 태그 속성

비디오 태그는 HTML5의 전역 속성과 이벤트 속성을 지원합니다.

고유 속성은 다음과 같습니다.

속성 값 ~ .

Controls Controls 이 속성이 나타나면 재생 버튼과 같은 컨트롤을 사용자에게 표시합니다.

높이 픽셀 비디오 플레이어의 높이를 설정합니다.

LOOP LOOP 이 속성이 나타나면 미디어 파일 재생 후 다시 재생을 시작합니다.

preload preload

이 속성이 나타나면 페이지가 로드되고 재생할 준비가 되면 동영상이 로드됩니다.

"autoplay"를 사용하는 경우 이 속성은 무시됩니다.

src url 재생할 영상의 URL입니다.

너비 픽셀 비디오 플레이어의 너비를 설정합니다.

대부분의 브라우저에서 지원되는 비디오 메서드 및 속성 이벤트

pause() currentTime 일시 중지

load() videoWidth 진행

canPlayType videoHeight 오류

기간 timeupdate

종료됨 종료됨

오류 중단

🎜>

volume loadedmetadata

height

width

注释：在所有属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。

三、从实例中了解Video标签的使用

<!DOCTYPE html>   
<html>   
<body>   
    <p style="text-align:center;">  
      <!--定义按钮，并添加事件监听函数-->  
      <button onclick="playPause()">播放/暂停</button>   
      <button onclick="makeBig()">大</button>  
      <button onclick="makeNormal()">中</button>  
      <button onclick="makeSmall()">小</button>  
      <br />   
      <video id="video1" width="420" style="margin-top:15px;">  
        <source src="http://demo.inwebson.com/html5-video/iceage4.mp4" type="video/mp4" />  
          <source src="http://demo.inwebson.com/html5-video/iceage4.webm" type="video/webM" />  
          <source src="http://demo.inwebson.com/html5-video/iceage4.ogv" type="video/ogg" />  
          <p>您的浏览器不支持此HTML5标签</p>  
      </video>  
    </p>   
  
    <script type="text/javascript">  
        //得到video标签对象  
        var myVideo=document.getElementById("video1");  
  
        function playPause()  
        {   
            if (myVideo.paused)   
              myVideo.play();   
            else   
              myVideo.pause();   
        }   
  
        function makeBig()  
        {   
            myVideo.width=560;   
        }   
  
        function makeSmall()  
        {   
            myVideo.width=320;   
        }   
  
        function makeNormal()  
        {   
            myVideo.width=420;   
        }   
    </script>   
  
</body>   
</html>

로그인 후 복사

HTML5 비디오 태그에 대한 자세한 설명