Un lecteur vidéo HTML facile à utiliser et compatible avec les navigateurs grand public

Les besoins de travail récents nécessitent que la vidéo envoyée sur le client mobile soit lue sur la page Web, et que la vidéo soit téléchargée et lue sur la page Web (comme le téléchargement de vidéos pédagogiques ou le partage dynamique, etc.) (Réflexions du blogueur : Mobile client Vous n'utiliserez pas le lecteur sur votre téléphone mobile pour regarder le contenu téléchargé, et vous ne le téléchargerez pas sur des sites Web bien connus tels que Youku ou YouTube, puis citerez directement le lien sur votre propre site Web. Cela n'utilise pas la bande passante du serveur, et c'est économique et économique !

Il n'y a aucune différence entre le téléchargement multimédia et le téléchargement général de fichiers, je n'entrerai donc pas dans les détails ici. Si vous ne comprenez pas, vous pouvez aller sur http://www.php.cn/php. /php-file-upload.html Découvrez-le ici.

Les captures d'écran vidéo sont prises côté serveur, ou en utilisant ffmpeg, qui est encore très stable pour le moment.

Au début, je voulais imiter les sites de vidéos professionnels comme Youku, mais j'ai découvert qu'ils étaient tous implémentés en flash, mais le blogueur savait tout sur Flash et n'en savait rien (hahahaha...), en plus Il semble que YouTube ait lancé d’autres tentatives, j’ai donc décidé de renoncer à explorer ce domaine.

Après une longue période passée dans les bras de Google, j'ai finalement réalisé que la balise vidéo de html5 semble être une bonne chose. Malheureusement, la compatibilité est un peu mauvaise. Cependant, html5 est une tendance après tout. j'ai donc décidé de travailler dur dans ce domaine. (Le blogueur pensa avec désinvolture : j'ai seulement besoin d'un tag pour lire une vidéo, et tout est fait. Il n'a pas besoin de penser que je suis stupide... hahahaha)

Après avoir passé une heure à chercher, j'ai trouvé que sur http://www .php.cn/html/html-html_videos.html Voici une solution :

Le code est le suivant :

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

Visuellement, cette méthode devrait être compatible avec la plupart des situations.

Cependant, nous ne pouvons pas empêcher les formats vidéo téléchargés par les utilisateurs, ni contrôler le type de navigateur utilisé par les utilisateurs, et les utilisateurs ne téléchargeront qu'un seul format vidéo, mais les formats vidéo pris en charge par chaque navigateur sont incohérents ( navigateur maléfique . ), basé sur cette idée, ce serait formidable s'il existait un plug-in compatible avec tous les formats vidéo dans tous les navigateurs et ayant une belle apparence et une forte contrôlabilité. L’idéal est beau mais la réalité est maigre. Cependant, après une longue période sur Google, j'ai trouvé un plug-in js qui permet aux navigateurs grand public d'être compatibles avec la balise vedio http://html5media.googlecode.com/svn/trunk/src/html5media.min.js
Lire des vidéos sur le Web Il existe également deux manières d'intégrer des vidéos (à l'aide de la balise img, étrangement, seul IE prend en charge ce mode et il n'est généralement pas activé) et d'utiliser l'assistant. Nous pouvons donc utiliser certains assistants pour lire les types de fichiers vidéo qui ne sont pas pris en charge ci-dessus (par exemple : quicktime)

Le code de lecture vidéo basé sur les deux points ci-dessus est le suivant :

Le code est le suivant :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!