基于阿里云播SDK 制作自己的在线M3U8播放器

hao070310

已于 2024-09-06 12:24:39 修改

阅读量433

点赞数 13

文章标签： javascript php

于 2024-09-06 11:59:25 首次发布

本文链接：https://blog.csdn.net/hao070310/article/details/141955803

版权

前提是搭建好PHP 运行环境

浏览器输入http://域名或者IP/aliplayer.php?url= 后面直接填M3U8连接

还可以直接用在影视网站中，作为播放器使用，我这个就是用在MACCMS的视频网站，这个播放插件有记忆播放功能，蛮不错的。唯一确定是自动下一集功能，需要苹果CMS自动下一集和记忆播放的，可以看看这个苹果CMS 自动下一集功能和记忆播放的播放器-CSDN博客

1.在 aliplayer.php 中构建播放器的基本框架：

<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>M3U8在线播放器</title>
<link rel="stylesheet" href="https://g.alicdn.com/apsara-media-box/imp-web-player/2.25.1/skins/default/aliplayer-min.css" />
<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/apsara-media-box/imp-web-player/2.25.1/aliplayer-min.js"></script>
<script type="text/javascript" charset="utf-8" src="/aliplayercomponents-1.0.10.min.js"></script>
</head>
<body>
</div> 
<div class="prism-player" id="player-con"></div>
<script>
  var player = new Aliplayer({
  "id": "player-con",
  "source": "<?php echo($_REQUEST['url']);?>",
  "width": "100%",
  "height": "100%",
  "autoplay": true,
  "isLive": false,
  "rePlay": false,
  "playsinline": true,
  "isVBR": true,
  "preload": true,
  "controlBarVisibility": "hover",
  "useH5Prism": true,
  skinLayout:[
   {name: "bigPlayButton", align: "blabs", x: 30, y: 80},
    {name: "H5Loading", align: "cc"},
    {name: "errorDisplay", align: "tlabs", x: 0, y: 0},
    {name: "infoDisplay"},
    {name:"tooltip", align:"blabs",x: 0, y: 56},
    {name: "thumbnail"},
    {name: "controlBar", align: "blabs", x: 0, y: 0,
      children: [
        {name: "progress", align: "blabs", x: 0, y: 44},
        {name: "playButton", align: "tl", x: 15, y: 12},
        {name: "timeDisplay", align: "tl", x: 10, y: 7},
        {name: "fullScreenButton", align: "tr", x: 10, y: 12},
        {name:"setting", align:"tr",x:15, y:12},
      ]
    }
  ],
    components: [{
       name: 'RateComponent',
      type: AliPlayerComponent.RateComponent},/* 倍速播放. */
      {name: "MemoryPlayComponent",
      type: AliPlayerComponent.MemoryPlayComponent,/* 记忆播放 */
    args:[true]
    }],
  },
  function (player) {
$('.prism-play-btn').on('click', function(event) {

	$(".prism-controlbar").toggleClass('bar-open');

});}

);

</script>
</body>

其中第8行有段JS文件是aliplayer Web播放器SDK组件, 这个组件还在不定时更新，现在1.0.10是最新版本。地址https://github.com/aliyunvideo/AliyunPlayer_Web/blob/master/customComponents/dist/aliplayer-components/aliplayercomponents-1.0.10.min.js下载后放到aliplayer.php一个目录下