주류 브라우저와 호환되는 사용하기 쉬운 HTML 비디오 플레이어

최근 작업 요구 사항에 따라 모바일 클라이언트에서 전송된 동영상이 웹 페이지에서 재생되고, 동영상이 웹 페이지에 업로드 및 재생되어야 합니다(예: 교육 동영상 업로드 또는 동적 공유 등) (Blogger의 생각: 모바일 클라이언트 업로드된 콘텐츠를 보기 위해 휴대폰의 플레이어를 사용하지 않을 것이며, Youku나 YouTube와 같은 잘 알려진 웹사이트에 업로드한 다음 자신의 웹사이트에서 링크를 직접 인용하지 않을 것입니다. 서버 대역폭을 차지하지 않으며 경제적이며 이점이 없습니다!

멀티미디어 업로드와 일반 파일 업로드에는 차이가 없으므로 여기서는 자세히 설명하지 않겠습니다. 이해가 안 되시면 http://www.php.cn/php를 방문하세요. /php-file-upload.html 여기에서 알아보세요.

동영상 스크린샷은 서버 측에서 촬영하거나 현재로서는 매우 안정적인 ffmpeg를 사용하여 촬영됩니다.

처음에는 Youku 같은 전문 영상 사이트를 흉내내고 싶었는데, 모두 플래시로 구현되어 있었는데, 그 블로거는 플래시에 대해 다 알면서 아무것도 몰랐어요(하하하하...), 게다가 유튜브가 다른 시도를 시작한 것 같아서 이 분야 탐색을 포기하기로 결정했습니다.

오랜만에 구글의 품에 안겨서 드디어 html5의 동영상 태그가 좋은 것 같다는 걸 깨달았습니다. 아쉽게도 호환성은 좀 떨어지지만 결국 html5가 대세이기 때문이죠. 나는 이 분야에서 열심히 일하기로 결심했다. (블로거는 무심코 생각했다. 태그만 있으면 동영상 재생이 완료된다. 내가 바보라고 생각할 필요도 없지... 하하하하)

한 시간 동안 검색한 끝에 나는 http://www .php.cn/html/html-html_videos.html에서 발견했습니다. 해결 방법은 다음과 같습니다.

코드는 다음과 같습니다.

<video width="320" height="240" controls="controls"> 
<source src="movie.mp4" type="video/mp4" /> 
<source src="movie.ogg" type="video/ogg" /> 
<source src="movie.webm" type="video/webm" /> 
<object data="movie.mp4" width="320" height="240"> 
<embed src="movie.swf" width="320" height="240" /> 
</object> 
</video>

시각적으로 이 메서드는 다음과 같아야 합니다. 대부분의 상황과 호환됩니다.

그러나 사용자가 업로드하는 동영상 형식을 방지할 수 없고 사용자가 사용하는 브라우저 유형을 제어할 수도 없으며 사용자는 하나의 동영상 형식만 업로드하게 되는데 각 브라우저에서 지원하는 동영상 형식이 일관되지 않습니다( evil browser . ), 이 아이디어를 바탕으로 모든 브라우저에서 모든 비디오 형식과 호환되고 아름다운 외관과 강력한 제어성을 갖춘 플러그인이 있다면 좋을 것입니다. 이상은 아름답지만 현실은 얄팍하다. 그러나 오랜 기간의 인터넷 검색 끝에 주류 브라우저가 vedio 태그 http://html5media.googlecode.com/svn/trunk/src/html5media.min.js웹에서 비디오 재생 비디오를 인라인하는 방법(img 태그의 도움으로 이상하게도 IE만 이 모드를 지원하고 일반적으로 켜지지 않음)과 보조자를 사용하는 두 가지 방법도 있습니다. 따라서 위에서 지원하지 않는 유형의 비디오 파일(예: Quicktime)을 재생하기 위해 일부 도우미를 사용할 수 있습니다.

위 두 가지 사항을 기반으로 한 비디오 재생 코드는 다음과 같습니다.

코드는 다음과 같습니다.

function showVideo(o,s,w, h, t){ //t文件格式 
var _html = ''; 
if($.inArray(t, ['ogg', 'mp4', 'webm']) >= 0){ //html5 surport 
var _doc=document.getElementsByTagName('head')[0]; 
var script=document.createElement('script'); 
script.setAttribute('type','text/javascript'); 
script.setAttribute('src','http://html5media.googlecode.com/svn/trunk/src/html5media.min.js'); 
_doc.appendChild(script); 
script.onload=script.onreadystatechange=function(){ 
if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){ 
_html = &#39;<video src="&#39;+s+&#39;" width="&#39;+w+&#39;" height="&#39;+h+&#39;" controls autobuffer >&#39;; 
_html += &#39;</video>&#39;; 
$(o).css({"width":w+&#39;px&#39;, &#39;height&#39;:h+&#39;px&#39;, &#39;cursor&#39;:&#39;default&#39;}); 
$(o).html(_html); 
} 
script.onload=script.onreadystatechange=null; 
} 
}else{ //other like 3gp 
_html += &#39;<object width="&#39;+w+&#39;" height="&#39;+h+&#39;" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab">&#39;; 
_html += &#39;<param name="src" value="&#39;+s+&#39;">&#39;; 
_html += &#39;<param name="controller" value="true">&#39;; 
_html += &#39;<param name="type" value="video/quicktime">&#39;; 
_html += &#39;<param name="autoplay" value="false">&#39;; 
_html += &#39;<param name="target" value="myself">&#39;; 
_html += &#39;<param name="bgcolor" value="black">&#39;; 
_html += &#39;<param name="pluginspage" value="http://www.apple.com/quicktime/download/index.html">&#39;; 
_html += &#39;<embed src="&#39;+s+&#39;" width="&#39;+w+&#39;" height="&#39;+h+&#39;" controller="true" autoplay="false" align="middle" bgcolor="black" target="myself" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/index.html"></embed>&#39;; 
_html += &#39;</object>&#39;; 
$(o).css({"width":w+&#39;px&#39;, &#39;height&#39;:h+&#39;px&#39;, &#39;cursor&#39;:&#39;default&#39;}); 
$(o).html(_html); 
} 
}

위 내용은 주류 브라우저와 호환되는 사용하기 쉬운 HTML 비디오 플레이어의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!