>  기사  >  웹 프론트엔드  >  HTML5 비디오 지원 감지(브라우저가 비디오 재생을 지원하는지 확인)_html5 튜토리얼 기술

HTML5 비디오 지원 감지(브라우저가 비디오 재생을 지원하는지 확인)_html5 튜토리얼 기술

WBOY
WBOY원래의
2016-05-16 15:49:373151검색

코드 복사
코드는 다음과 같습니다.

점점 더 많은 웹사이트 이제 비디오 재생 기능을 제공합니다(플러그인 아님). HTML5는 비디오 표시에 대한 표준을 제공합니다. 그렇다면 브라우저가 비디오 재생을 지원하는지 확인하는 방법은 무엇입니까?


코드 복사
코드는 다음과 같습니다.



;/ h1>

브라우저가 HTML5 동영상을 지원하는지 확인하세요.








다음은 js 코드입니다. 🎜>

코드 복사
코드는 다음과 같습니다. function checkVideo() {
if(!!document .createElement('video').canPlayType)
{
//비디오 요소 생성
var vidTest=document.createElement("video")
//ogg 형식의 비디오를 재생할 수 있는지 감지
oggTest= vidTest.canPlayType('video/ogg; codecs="theora, vorbis"')
if (!oggTest)
{
//MP4 형식의 비디오를 재생할 수 있는지 감지
h264Test=vidTest .canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"')
if (!h264Test)
{
document.getElementById(" checkVideoResult").innerHTML="죄송합니다. 동영상이 지원되지 않습니다."
}
else
{
if (h264Test=="아마도")
{
document.getElementById(" checkVideoResult").innerHTML="예! 전체 지원!";
}
else
{
document.getElementById("checkVideoResult").innerHTML="글쎄. 일부 지원됩니다.";
}
}
}
else
{
if (oggTest=="아마도")
{
document.getElementById("checkVideoResult").innerHTML="예 ! 전체 지원!";
}
else
{
document.getElementById("checkVideoResult").innerHTML="일부 지원됩니다.";
}
}
}
else
{
document.getElementById("checkVideoResult").innerHTML="죄송합니다. 동영상이 지원되지 않습니다."
}
}






코드 복사
코드는 다음과 같습니다. canPlayType 메소드 설명: 1. : 브라우저가 지정된 오디오/비디오 형식을 재생할 수 있는지 확인합니다.
2. 반환 값:
"아마도", 브라우저가 비디오 또는 오디오를 지원할 가능성이 가장 높음을 나타냅니다.
'어쩌면'은 브라우저가 동영상이나 오디오를 지원할 수도 있다는 뜻입니다.
""(빈 문자열)은 브라우저가 비디오 또는 오디오를 지원하지 않음을 나타냅니다.
참고: Internet Explorer 8 이하 버전에서는 이 방법을 지원하지 않습니다.
구문: audio|video.canPlayType(type))
매개변수 설명:
type: 감지할 오디오 또는 비디오 유형,
공통 값: video/ogg video/ webm ; audio/mpeg;audio/ogg;audio/mp4
공통 값 ​​(감지할 오디오 또는 비디오 코덱 포함):
video/ogg; codecs="theora, vorbis"
video/ mp4 ; codecs="avc1.4D401E, mp4a.40.2"
codecs="vp8.0, vorbis"
audio/ogg; codecs="vorbis"
오디오/mp4; " mp4a.40.5"

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사:IE10 Error.stack은 스크립트 디버깅을 더욱 편리하고 빠르게 만듭니다_html5 튜토리얼 팁다음 기사:IE10 Error.stack은 스크립트 디버깅을 더욱 편리하고 빠르게 만듭니다_html5 튜토리얼 팁

관련 기사

더보기