Heim > Artikel > Web-Frontend > Unterstützt Vedio RTMP in HTML5?
Vedio in HTML5 unterstützt kein RTMP; RTMP ist die Abkürzung für „Real Time Messaging Protocol“ und ist eine Reihe von Video-Live-Übertragungsprotokollen, die von Macromedia entwickelt wurden. Diese Lösung erfordert die Einrichtung eines speziellen RTMP-Streaming-Dienstes wie „Adobe Media“. Server“ und nur Flash kann zum Implementieren des Players im Browser verwendet werden, sodass das Video-Tag in HTML5 keine RTMP-Protokollvideos abspielen kann.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, HTML5-Version, Dell G3-Computer.
Real Time Messaging Protocol (kurz RTMP) ist eine Reihe von Video-Live-Übertragungsprotokollen, die von Macromedia entwickelt wurden und jetzt zu Adobe gehören. Diese Lösung erfordert den Aufbau eines speziellen RTMP-Streaming-Dienstes wie Adobe Media Server, und zur Implementierung des Players im Browser kann nur Flash verwendet werden. Die Echtzeitleistung ist sehr gut und die Verzögerung ist sehr gering. Der Nachteil besteht jedoch darin, dass die mobile WEB-Wiedergabe nicht unterstützt wird.
Auf der Browserseite kann das HTML5-Video-Tag keine RTMP-Protokollvideos abspielen, was über video.js erreicht werden kann.
Das Vue-Projekt verwendet den Vue-Video-Player. Die unterste Ebene verwendet tatsächlich Videojs, was nur ein Plug-In für Vue ist. Zuerst müssen wir das Plug-In im Vue-Projekt npm install vue-video installieren. Player
Dann verwenden wir einfach den Player direkt in der HelloWorld-Komponente
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, }, }; }, };
(Lernvideo-Sharing: CSS-Video-Tutorial, HTML-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonUnterstützt Vedio RTMP in HTML5?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!