視頻網站使用dplayer教程，播放視頻m3u8

首先，加載dplayer的必要文件

css文件：

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

js文件：

<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>

加載完文件，在需要播放視頻的地方設置容器：

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

加載js代碼：

<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>

集數的html（混在php代碼裏面的，懶得刪了）：

<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>