La vidéo prend-elle en charge rtmp en HTML5 ?

Vedio en HTML5 ne prend pas en charge rtmp ; rtmp est l'abréviation de « Real Time Messaging Protocol » et est un ensemble de protocoles de diffusion vidéo en direct développés par Macromedia. Cette solution nécessite la mise en place d'un service de streaming RTMP spécialisé tel que « Adobe Media ». Server", et dans Only Flash peut être utilisé pour implémenter le lecteur dans le navigateur, de sorte que la balise vidéo en HTML5 ne peut pas lire les vidéos du protocole RTMP.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version HTML5, ordinateur Dell G3.

La vidéo en HTML5 ne prend pas en charge rtmp

Le Real Time Messaging Protocol (RTMP en abrégé) est un ensemble de protocoles de diffusion vidéo en direct développé par Macromedia et appartient désormais à Adobe. Cette solution nécessite la création d'un service de streaming RTMP spécialisé tel qu'Adobe Media Server, et seul Flash peut être utilisé pour implémenter le lecteur dans le navigateur. Ses performances en temps réel sont très bonnes et le délai est très faible, mais son inconvénient est qu'il ne prend pas en charge la lecture WEB mobile.

Côté navigateur, la balise vidéo HTML5 ne peut pas lire les vidéos en protocole RTMP, ce qui peut être réalisé via video.js.

Le projet vue utilise vue-video-player. La couche inférieure utilise en fait videojs, qui n'est qu'un plug-in pour vue. Tout d'abord, nous devons installer le plug-in dans le projet vue npm install vue-video-. player

Ensuite, nous utilisons simplement le player directement dans le composant HelloWorld

class="vjs-custom-skin videoPlayer"
:options="playerOptions"
>
import "@/video-js.css";
import { videoPlayer } from "vue-video-player";
import "videojs-flash";
export default {
components: {
videoPlayer,
},
data() {
return {
playerOptions: {
height: "300",
sources: [
{
type: "rtmp/mp4",
src: "rtmp://192.168.12.187:1935/live/1",
},
],
techOrder: ["flash"],
autoplay: false,
controls: true,
},
};
},
};

(Partage vidéo d'apprentissage : tutoriel vidéo CSS, tutoriel vidéo 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!