【视频直播篇六】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"
        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>