Video streaming platform using DPlayer tutorial for playing M3U8 videos.

First, load the necessary files for dplayer

css file:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.css">

js file:

<script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>

After loading the file, set up the container where the video needs to be played:

<div id="dplayer"></div>

Load js code:

<script type="text/javascript">
        let dp; // 声明 dp 变量以便在函数外访问
 
        document.addEventListener('DOMContentLoaded', function () {
            // 初始化 DPlayer 实例
            dp = new DPlayer({
                element: document.getElementById('dplayer'),
                autoplay: false,
                loop: false,
                theme: '#FADFA3',
                video: {
                    url: '视频地址',
                    type: 'hls'
                }
            });
 
            // 绑定点击事件
            $(".axis_container dd").on("click", function() {
                $(this).addClass("active").siblings().removeClass("active");
                const videoUrl = $(this).find('a').data('url'); // 获取 data-url 属性
                dp.switchVideo({
                    url: videoUrl,
                    type: 'hls'
                });
            });
        });
</script>

The html of the episode (mixed in the php code, too lazy to delete it):

<div class="axis_container clearfix">
  <dl>
    <dt>超清播放：</dt>

<?php
if($navinfor['onlinepath']){
$arr_jishu = explode(PHP_EOL,$navinfor['onlinepath']);
foreach($arr_jishu as $k => $v){
	$v1 = explode('::::::',$v);
	$active = '';
	if($k==0){
	$active = 'active';
	}
	?>
	<dd class="<?=$active?>"><a class="btn btn-orange min-100px " href="javascript:void(0);" data-url='<?=$v1[1]?>' ><?=$v1[0]?></a></dd>
	<?
}
}
?>
  </dl>
</div>