網頁播放rtmp流
阿新 • • 發佈:2019-02-01
在h5頁面裡播放rtmp流很簡單,只需要一個viode.js庫的支援。當前video.js庫已經出到了6.x版本。但是6.x版本播放不了rtmp流。所以示例中只用了5.5.3版本的庫。
還有,想要這個示例可以執行,要用firefox執行;如果還是不行,就搭一個apache伺服器來執行。
<html> <head> <title>視訊直播</title> <meta charset="utf-8"> <link href="http://vjs.zencdn.net/5.5.3/video-js.css" rel="stylesheet"> <!-- If you'd like to support IE8 --> <script src="http://vjs.zencdn.net/ie8/1.1.1/videojs-ie8.min.js"></script> </head> <body> <h1>直播間</h1> <video id="my-video" class="video-js" controls preload="auto" width="640" height="300" poster="http://ppt.downhot.com/d/file/p/2014/08/12/9d92575b4962a981bd9af247ef142449.jpg" data-setup="{}"> <source src="rtmp://live.hkstv.hk.lxdns.com/live/hks" type="rtmp/flv"> <!-- 如果上面的rtmp流無法播放,就播放hls流 --> <!-- <source src="http://10.10.5.119/live/livestream.m3u8" type='application/x-mpegURL'> --> <p class="vjs-no-js">播放視訊需要啟用 JavaScript,推薦使用支援HTML5的瀏覽器訪問。 To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> </p> </video> <script src="http://vjs.zencdn.net/5.5.3/video.js"></script> </body> </html>