HTML5 실제 전투 및 미디어 요소 분석 (1. 비디오 태그 및 오디오 태그 소개)

HTML5가 출시되면서 휴대폰에서는 플래시를 지원할 수 없게 되었습니다. 즉, 플래시에서 제작된 음악 재생 및 동영상 재생은 HTML5의 미디어 태그인 비디오 태그와 오디오 태그를 통해서만 제작할 수 있다는 의미입니다. 공교롭게도 모바일 단말기는 HTML5의 미디어 태그 비디오 태그와 오디오 태그를 매우 잘 지원합니다. 이로 인해 HTML5는 모바일 장치에서 매우 인기가 높습니다.

비디오 태그와 오디오 태그도 매우 유용한 JavaScript API를 제공하여 사용자 정의 컨트롤을 생성할 수 있습니다. 두 태그의 사용법은 다음과 같습니다.

　HTML 코드

<!-- 视频标签 -->
<video src="meng.ogg" id="myVideo">视频不支持</video>

<!-- 音频标签 -->
<audio src="long.mp3" id="myAudio">音频不支持</audio>

video 태그, audio 태그 사용 시 src 속성을 포함하여 포인트를 지정해야 합니다. 미디어 파일을 로드합니다. 너비 및 높이 속성을 설정하여 플레이어 크기를 지정할 수도 있습니다. 비디오 콘텐츠를 로드하는 동안 이미지를 표시하면 포스터 속성에 이미지의 URI를 지정할 수 있습니다. 또한 태그에 컨트롤 속성이 있습니다. 이 속성은 사용자가 미디어를 직접 조작할 수 있도록 브라우저에 UI 컨트롤이 표시되어야 함을 의미합니다. 여는 태그와 닫는 태그 사이의 모든 항목은 대체 콘텐츠로 사용되며 브라우저가 미디어 요소를 지원하지 않는 경우 표시됩니다.

정확하게는 모든 브라우저가 서로 다른 미디어 소스를 지원하는 것은 아니기 때문에 여러 소스 태그를 별도로 작성해야 합니다. 작은 예는 다음과 같습니다.

　HTML 코드

<!-- 音频标签 -->
<audio id="audio">
	<source id="s1" src="meng.mp3"></source>
	<source id="s2" src="meng.ogg"></source>
	音频不支持
</audio>

<!-- 视频标签 -->
<video id="video">
	<source id="s1" src="meng.mp3"></source>
	<source id="s2" src="meng.ogg"></source>
	视频不支持
</video>

비디오 태그와 오디오 태그를 지원하는 브라우저에는 Firefox 3.5+ 및 Opera 10.5+가 있습니다. , IE9+, Safari 4+, Chrome, iOS용 Safari 및 Android용 WebKit.

HTML5 실제 전투 및 미디어 요소 분석(1. 비디오 태그 및 오디오 태그 소개)이 소개되었습니다. 미디어 태그는 HTML5에서 잘 지원되므로 더 자주 사용됩니다. HTML5에 대한 더 많은 관련 지식은 Menglong 웹사이트에서 찾아보실 수 있습니다.

새로 추가된 영상 재생 방법

JavaScript 코드

function bofangshipin(Num) {
            var u = navigator.userAgent;
            if (u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1) {  //苹果
                $("#vid" + Num).css("width", "100%");
                document.getElementById('vid' + Num).style.display = 'block';
                document.getElementById('vid' + Num).play();
            } else {  //安卓
            $("#vid" + Num).css({
                "width": $(".wrapperW").width(),
                "height": $(".wrapperW").height(),
                "left": ( $(".m_wraper").width() - $(".wrapperW").width() ) / 2
            });
                document.getElementById('vid' + Num).style.display = 'block';
                setTimeout(function () { document.getElementById('vid' + Num).play(); }, 1000);
            }

        }
        document.getElementById('vid' + 1).addEventListener("ended", end_playing, false);
        document.getElementById('vid' + 1).addEventListener("pause", end_playing, false);
        document.getElementById('vid' + 2).addEventListener("ended", end_playing, false);
        document.getElementById('vid' + 2).addEventListener("pause", end_playing, false);
        document.getElementById('vid' + 3).addEventListener("ended", end_playing, false);
        document.getElementById('vid' + 3).addEventListener("pause", end_playing, false);
        function end_playing() {
            document.getElementById('vid' + 1).style.display = 'none';
            document.getElementById('vid' + 2).style.display = 'none';
            document.getElementById('vid' + 3).style.display = 'none';

            $("#vid" + 1).css("width", "0%");
            $("#vid" + 2).css("width", "0%");
            $("#vid" + 3).css("width", "0%");
        }	

HTML 코드

<video src="images/sanxing.mp4"  id="vid1" controls autoplay  style="position: absolute; z-index:100;  left: 0px; display:none" name="vid1">
     <source src="images/sanxing.mp4"></source>
  </video>

위 내용은 HTML5 실제 전투 내용과 미디어 요소 분석입니다. (1. 비디오 태그 및 오디오 태그 소개) 더 많은 관련 내용은 주의해주세요. PHP 중국어 홈페이지(www.php.cn)!