html5中vedio不支援rtmp;rtmp是「Real Time Messaging Protocol」的縮寫,是Macromedia開發的一套視訊直播協議,這套方案需要搭建專門的RTMP串流服務如「Adobe Media Server ”,而且在瀏覽器中只能使用Flash實作播放器,所以HTML5中video標籤無法播放RTMP協定的影片。
本教學操作環境:windows10系統、HTML5版本、Dell G3電腦。
Real Time Messaging Protocol(簡稱 RTMP)是 Macromedia 開發的一套視訊直播協議,現在屬於 Adobe。這套方案需要建造專門的 RTMP 串流服務如 Adobe Media Server,並且在瀏覽器中只能使用 Flash 實作播放器。它的即時性非常好,延遲很小,但無法支援行動裝置 WEB 播放是它的硬傷。
瀏覽器端,HTML5 video標籤無法播放 RTMP 協定的視頻,可以透過 video.js 來實現。
vue專案使用vue-video-player底層其實還是用的是videojs,只不過是vue的一個插件而已,首先我們需要在vue專案中安裝該插件npm install vue-video- player
然後,我們直接在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, }, }; }, };
以上是html5中vedio支援rtmp嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章!