Ein benutzerfreundlicher HTML-Videoplayer, der mit gängigen Browsern kompatibel ist

Aktuelle Arbeitsanforderungen erfordern die Wiedergabe des auf dem mobilen Client gesendeten Videos auf der Webseite sowie das Hochladen und Abspielen des Videos auf der Webseite (z. B. Hochladen von Lehrvideos oder dynamisches Teilen usw.) (Gedanken des Bloggers: Mobil Client Sie werden den Player auf Ihrem Mobiltelefon nicht verwenden, um die hochgeladenen Inhalte anzusehen, und Sie werden sie nicht auf bekannte Websites wie Youku oder YouTube hochladen und den Link dann direkt auf Ihrer eigenen Website zitieren. Es beansprucht keine Serverbandbreite und ist wirtschaftlich und wirtschaftlich. Es gibt keinen Vorteil!

Es gibt keinen Unterschied zwischen Multimedia-Upload und allgemeinem Datei-Upload, daher werde ich hier nicht auf Details eingehen. Wenn Sie es nicht verstehen, können Sie zu http://www.php.cn/php gehen /php-file-upload.html Hier erfahren Sie es.

Video-Screenshots werden serverseitig oder mit ffmpeg erstellt, was derzeit noch sehr stabil ist.

Am Anfang wollte ich professionelle Video-Websites wie Youku nachahmen, stellte aber fest, dass sie alle in Flash implementiert waren, der Blogger jedoch alles über Flash wusste und nichts darüber wusste (hahahaha...), außerdem Es scheint, dass YouTube andere Versuche gestartet hat, daher habe ich beschlossen, die Erkundung in diesem Bereich aufzugeben.

Nach langer Zeit in der Umarmung von Google wurde mir endlich klar, dass der Video-Tag von HTML5 eine gute Sache zu sein scheint. Allerdings ist HTML5 doch ein Trend. Deshalb habe ich beschlossen, in diesem Bereich hart zu arbeiten. (Der Blogger dachte beiläufig: Ich brauche nur einen Tag, um ein Video abzuspielen, und schon ist alles erledigt. Er muss mich nicht für dumm halten ... hahahaha)

Nachdem ich eine Stunde mit der Suche verbracht hatte, habe ich Ich habe das unter http://www .php.cn/html/html-html_videos.html gefunden. Hier ist eine Lösung:

Der Code lautet wie folgt:

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

Visuell ist diese Methode sollte mit den meisten Situationen kompatibel sein.

Wir können jedoch nicht verhindern, dass die von Benutzern hochgeladenen Videoformate noch die Art des von Benutzern verwendeten Browsers steuern. Außerdem laden Benutzer nur ein Videoformat hoch, aber die von den einzelnen Browsern unterstützten Videoformate sind inkonsistent ( basierend auf dieser Idee wäre es großartig, wenn es ein Plug-in gäbe, das mit allen Videoformaten in allen Browsern kompatibel wäre und ein schönes Aussehen und eine gute Steuerbarkeit hätte. Das Ideal ist schön, aber die Realität ist dürftig. Nach langem Googeln habe ich jedoch ein js-Plug-in gefunden, das es Mainstream-Browsern ermöglicht, mit dem Vedio-Tag http://html5media.googlecode.com/svn/trunk/src/html5media.min.jsVideos im Web abspielen Es gibt auch zwei Möglichkeiten, Videos einzubinden (mit Hilfe des img-Tags, seltsamerweise unterstützt nur der IE diesen Modus und er ist im Allgemeinen nicht aktiviert) und den Assistenten zu verwenden. So können wir einige Assistenten verwenden, um die oben nicht unterstützten Videodateitypen abzuspielen (z. B. Quicktime).

Der Videowiedergabecode basierend auf den beiden oben genannten Punkten lautet wie folgt:

Der Code lautet wie folgt:

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

Das obige ist der detaillierte Inhalt vonEin benutzerfreundlicher HTML-Videoplayer, der mit gängigen Browsern kompatibel ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!