【视频直播篇六】videojs的使用

本文主要是介绍【视频直播篇六】videojs的使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

这个视频直播出了一个系列，以下文章是几个播放器的使用教程

【视频直播篇一】入门篇
【视频直播篇二】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"controlspreload="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 aweb 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>