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

我就是我 2023-10-05 21:24 46阅读 0赞

###### 前言 ######

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

*  [【视频直播篇一】入门篇][Link 1]
 *  [【视频直播篇二】vue-cli3集成LivePlayer][vue-cli3_LivePlayer]
 *  [【视频直播篇三】vue-cli3集成vue-video-player][vue-cli3_vue-video-player]
 *  [【视频直播篇四】vue-cli3集成flv.js][vue-cli3_flv.js]
 *  [【视频直播篇五】vue-cli3集成vue-aliplayer-v2][vue-cli3_vue-aliplayer-v2]
 *  [【视频直播篇七】Aliplayer的使用][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>
    
    
    
    
    
    
    
    <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>
        
        <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>

[Link 1]: https://afu-bob.blog.csdn.net/article/details/114370845
[vue-cli3_LivePlayer]: https://afu-bob.blog.csdn.net/article/details/114528294
[vue-cli3_vue-video-player]: https://afu-bob.blog.csdn.net/article/details/114528972
[vue-cli3_flv.js]: https://afu-bob.blog.csdn.net/article/details/114530145
[vue-cli3_vue-aliplayer-v2]: https://afu-bob.blog.csdn.net/article/details/114530444
[Aliplayer]: https://afu-bob.blog.csdn.net/article/details/114531755