前言
这个视频直播出了一个系列，以下文章是几个播放器的使用教程
- 【视频直播篇一】入门篇
- 【视频直播篇二】vue-cli3集成LivePlayer
- 【视频直播篇三】vue-cli3集成vue-video-player
- 【视频直播篇四】vue-cli3集成flv.js
- 【视频直播篇五】vue-cli3集成vue-aliplayer-v2
- 【视频直播篇七】Aliplayer的使用
正文
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>video.js播放rtmp流</title>
<link href="//vjs.zencdn.net/7.10.2/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/7.10.2/video.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js"></script>
</head>
<body>
<!--vjs-big-play-centered 播放按钮居中-->
<!--poster默认的显示界面，就是还没点播放，给你显示的界面-->
<!--controls 规定浏览器应该为视频提供播放控件-->
<!--preload="auto" 是否提前加载-->
<!--autoplay 自动播放-->
<!--loop=true 自动循环-->
<!--data-setup='{"example_option":true}' 可以把一些属性写到这个里面来，如data-setup={"autoplay":true}-->
<video style="width:100%;min-width:40vw;height:560px;"
id="my-player"
class="video-js"
controls
preload="auto"
poster="//vjs.zencdn.net/v/oceans.png"
data-setup='{}'>
<source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
<!--<source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
<source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
<source src="rtmp://58.200.131.2:1935/livetv/hunantv" type="rtmp/flv"></source>-->
<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">
supports HTML5 video
</a>
</p>
</video>
<script type="text/javascript">
var options = {
};
var player = videojs('my-player', options, function onPlayerReady() {
videojs.log('Your player is ready!');
// In this context, `this` is the player that was created by Video.js.
this.play();
// How about an event listener?
this.on('ended', function() {
videojs.log('Awww...over so soon?!');
});
});
player.play();
// 1. 播放 player.play()
// 2. 停止 player.pause()
// 3. 暂停 player.pause()
</script>
</body>
</html>
