【视频直播篇七】Aliplayer的使用

电玩女神 2023-10-05 21:24 2阅读 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]
 *  [【视频直播篇六】videojs的使用][videojs]

###### 正文 ######

可以直接去`Aliplayer`的官网看在线配置代码  
[http://player.alicdn.com/aliplayer/setting/setting.html][http_player.alicdn.com_aliplayer_setting_setting.html]

具体代码如下：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="IE=edge" >
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
        <title>Aliplayer Online Settings</title>
        <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.3/skins/default/aliplayer-min.css" />
        <script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.9.3/aliplayer-min.js"></script>
        <style type="text/css">
            body {
         
                margin: 0 !important;
                padding: 0 !important;
            }
        </style>
    
    </head>
    <body>
    <div class="prism-player" id="player-con"></div>
    <script>
        var player = new Aliplayer({
         
                "id": "player-con",
                "source": "rtmp://58.200.131.2:1935/livetv/hunantv",
                "width": "100%",
                "height": "500px",
                "autoplay": true,
                "isLive": false,
                "rePlay": false,
                "playsinline": true,
                "preload": true,
                "controlBarVisibility": "hover",
                "useH5Prism": true
            }, function (player) {
         
                console.log("The player is created");
            }
        );
    </script>
    </body>

[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
[videojs]: https://afu-bob.blog.csdn.net/article/details/114531049
[http_player.alicdn.com_aliplayer_setting_setting.html]: http://player.alicdn.com/aliplayer/setting/setting.html