首先,加载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>
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
暂无评论内容