An easy-to-use HTML video player compatible with mainstream browsers

Recent work needs require the video sent on the mobile client to be played on the web page, and the video uploaded and played on the web page (such as uploading teaching videos or dynamic sharing, etc.) (Blogger's thoughts: Mobile client You won’t use the player on your mobile phone to watch the uploaded content, and you won’t upload it to well-known websites such as Youku or YouTube, and then directly quote the link on your own website. It doesn’t take up server bandwidth, and it’s economical and economical. There is no benefit! !

There is no difference between multimedia uploading and general file uploading, so I won’t go into details here. If you don’t understand, you can go to //m.sbmmt.com/php/php-file-upload.html Find out here.

Video screenshots are made on the server side, or using ffmpeg, which is still very stable at the moment.

At the beginning, I wanted to imitate professional video websites like Youku, but found that they were all implemented in flash, but the blogger knew all about flash and knew nothing about it (hehehehe...), plus It seems that YouTube has started other attempts, so I decided to give up exploring in this area.

After a long time in the embrace of Google, I finally realized that the video tag of html5 seems to be a good thing. Unfortunately, the compatibility is a bit poor. However, html5 is a trend after all, so I decided to work hard in this area. (The blogger thought casually: I only need a tag to play a video, and it’s all done. He doesn’t need to think I’m stupid... Hahahaha)

After spending an hour of searching, I found that at http://www .php.cn/html/html-html_videos.html Here is a solution:

The code is as follows:

<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>

Visually, this method should be compatible with most situations.

However, we cannot prevent the video formats uploaded by users, nor can we control the type of browser used by users, and users will only upload one video format, but the video formats supported by each browser are inconsistent (evil browser . . ), based on this idea, it would be great if there was a plug-in that is compatible with all video formats in all browsers and has a beautiful appearance and strong controllability. The ideal is beautiful but the reality is skinny. However, after a long period of google, I found a js plug-in that allows mainstream browsers to be compatible with the vedio tag http://html5media.googlecode.com/svn/trunk/src/html5media.min.js
Play videos on the web There are also two ways to inline videos (with the help of the img tag, strangely only IE supports this mode and it is generally not turned on) and using the assistant. So we can use some assistants to play the types of video files that are not supported above (for example: quicktime)

The video playback code based on the above two points is as follows:

The code is as follows:

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); 
} 
}

The above is the detailed content of An easy-to-use HTML video player compatible with mainstream browsers. For more information, please follow other related articles on the PHP Chinese website!