鍍金池/ 問(wèn)答/HTML5  HTML/ video.js播放RTMP流

video.js播放RTMP流

基于video.js
我在本地直接用rtmp流播放
導(dǎo)致瀏覽器報(bào)錯(cuò)
圖片描述

html代碼

<div class="as_video_box">

            <video id="as_video" class="video-js aosaVideo" src="rtmp://192.168.1.195/live/demo">
                <source src="rtmp://192.168.1.195/live/demo" type='rtmp/mp4'></source>
            </video>
        </div>

js代碼
//生成視頻

var aosaTv = videojs("as_video",{
    "techOrder" : ['html5','flash'],
    "controls": false,
    "bigPlayButton" : false,
    flash: {
        swf: 'js/video-js.swf'
    },
    controlBar: {
        muteToggle: false,
        captionsButton: false,
        chaptersButton: false,
        playbackRateMenuButton: false,
        LiveDisplay: false,
        subtitlesButton: false,
        remainingTimeDisplay: false,
        progressControl: false,
        volumeMenuButton: {
            inline: false,
            vertical: true
        },//豎著的音量條
        fullscreenToggle: false
    }
},
function() {
    /*自定義*/
    var v = this;
    $.AosaTv(v,option);
});
回答
編輯回答
貓小柒

你可以照我下面寫的這段代碼換成你的路徑和資源試試，我測(cè)試過(guò)時(shí)OK的。

<div id="content">
    <video id="rtmpVideo" class="video-js vjs-default-skin vjs-big-play-centered" width="100%" height="100%">
        <source src="rtmp://10.129.4.250/live/2d783dfd1f0c5557bb8154a43a88191428d" type="rtmp/flv">
        <p class="vjs-no-js">
            您的瀏覽器不支持HTML5，請(qǐng)升級(jí)瀏覽器。
        </p>
    </video>
</div>

<script>
    videojs.options.flash.swf = "/js/video-js-5.8.2/video-js.swf";
    // 初始化視頻，設(shè)為全局變量
    var myPlayer = videojs('rtmpVideo', {
        autoplay: true,
        controls: true,//控制條
        poster: "/images/camera/playStop.png",
        techOrder: ["flash"],
        muted: true,// 靜音
        preload: "auto",// 預(yù)加載
        language: "zh-CN",// 初始化語(yǔ)言
        playbackRates: [1, 2, 3, 4, 5, 8, 10, 20]// 播放速度
    }, function () {
        console.log("--------------成功初始化視頻--------------");
        myPlayer.one("playing", function () {         // 監(jiān)聽播放
            console.log("開始播放");
        });
        myPlayer.one("error", function (error) {      // 監(jiān)聽錯(cuò)誤
            console.error("監(jiān)聽到異常，錯(cuò)誤信息：%o",error);
        });
    });
2018年7月4日 15:35