dplayer播放器（特点可以兼容MP4和m3u8两种文件）

<!DOCTYPE html>
<html lang="en">
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <!-- 引入基础样式文件 mui-player.min.css  -->
    <style>
            .container1{
                max-width: 960px;
                /*height: auto;*/
                height: 600px;
                margin: 50px auto;
                text-align: center;
                color: rgb(29, 121, 216)
            }
            #dplayer {
                /*  */
                    max-width: 960px;
                    height: 620px;
                    margin: 0 auto;
                }
            a{
                text-decoration: none;
                color: rgb(29, 121, 216);
            }


            .container2 {
                /*display: flex;*/
                max-width: 960px;
                /*height: auto;*/
                height: 600px;
                text-align: center;
                margin: 0 auto;
                /**/

            }
            #mse {
                /*  */
                    width: 600px;
                    height: 337px;
            }

            .container2 h2{
                color: rgb(29, 121, 216)
            }
            .breadcrumb{
                background-color: rgb(29, 121, 216);
            }

            .mse {
                padding-right: 0;
                padding-left: 0;
            }



    </style>
</head> 
<body> 
    <!-- 指定播放器容器 -->
    <div class="container">
        <a href="/index"><div id="index"><h1>首页</h1></div></a>
        <div id="dplayer"></div>
        <div id="title"><h2>标题</h2></div>
    </div>

    <!-- dplayer测试demo  -->


    <!-- 引入基础脚本 player.min.js  --> 
    


<script src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.5.18/hls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dplayer/1.27.1/DPlayer.min.js"></script>

   <script >
       const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        // url: 'http://videomy.yongaomy.com:8091/20200502/dAPPeXWg/index.m3u8',
        url: 'https://lizst.glendonclass.com/media/videos/mp4/235858.mp4?st=jn6DoWyxoKMLsoI8gyyq8Q&e=1738424843',
         //url: 'https://v.zuisevod.com/20241209/2V66l0yF/index.m3u8',

        //pic: '',
        type: 'auto',

    },
    autoplay: true,
});
   </script>
    <!--  <script src=" url_for('static', filename='js/playpage.js') "></script>  -->

</body> 
</html>
posted on 2025-02-01 22:56 我爱你的阅读(385) 评论(0) 收藏举报