1.引入JS和CSS包直接撸！

<link href="http://vjs.zencdn.net/5.20.1/video-js.css" rel="stylesheet">
<!-- 视频播放插件 -->
<script src="http://vjs.zencdn.net/5.20.1/video.js"></script>
<!-- 兼容ie8 -->
<script src="http://vjs.zencdn.net/5.20.1/videojs-ie8.min.js"></script>

2.在HTML中放入容器，这里选择通过JS控制。

html:

<!-- vjs-big-play-centered可使大的播放按钮居住，vjs-fluid可使视频占满容器 -->
<video id="myVideo" class="video-js vjs-big-play-centered vjs-fluid">
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank">
s	upports HTML5 video
</a>
</p>
</video>

JS：

<script>
var player = videojs(document.getElementById('myVideo'), {
controls: true, // 是否显示控制条
poster: 'xxx', // 视频封面图地址
preload: 'auto',
autoplay: false,
fluid: true, // 自适应宽高
language: 'zh-CN', // 设置语言
muted: false, // 是否静音
inactivityTimeout: false,
controlBar: { // 设置控制条组件
/* 设置控制条里面组件的相关属性及显示与否
'currentTimeDisplay':true,
'timeDivider':true,
'durationDisplay':true,
'remainingTimeDisplay':false,
volumePanel: {
inline: false,
}
*/
/* 使用children的形式可以控制每一个控件的位置，以及显示与否 */
children: [
{name: 'playToggle'}, // 播放按钮
{name: 'currentTimeDisplay'}, // 当前已播放时间
{name: 'progressControl'}, // 播放进度条
{name: 'durationDisplay'}, // 总时间
{ // 倍数播放
name: 'playbackRateMenuButton',
'playbackRates': [0.5, 1, 1.5, 2, 2.5]
},
{
name: 'volumePanel', // 音量控制
inline: false, // 不使用水平方式
},
{name: 'FullscreenToggle'} // 全屏
]
},
sources:[ // 视频源
{
src: '//vjs.zencdn.net/v/oceans.mp4',
type: 'video/mp4',
poster: '//vjs.zencdn.net/v/oceans.png'
}
]
}, function (){
console.log('视频可以播放了',this);
});
</script>

3.关于动态设置播放URL：

   //视频配置
            player = videojs(document.getElementById('myVideo'), {
                sources:[ // 视频源
                    {
                        src: 'rtmp://192.168.168.10:1935/live/room1226752779',
                        type: 'rtmp/flv',
                    }
                ]
            })
        var data = {
                    // src: res.result[1].rtmpUrl,
                    // src:"rtmp://192.168.168.10:1935/live/room1508839421",
                    src:res.result[1].rtmpUrl,
                    type: 'rtmp/flv'
                }
        player.src(data)
        player.load(data)

转自：https://segmentfault.com/a/1190000018914486?utm_source=tag-newest