U3m8电脑怎么播放?

2021-12-15  本文已影响0人  大旺旺的弟弟小旺旺

u3m8视频链接可以使用Dplayer框架播放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dplayer m3u8 播放器</title>

    <style type="text/css">
        body, html, .dplayer {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            color: #aaa;
           
        }
        a {
            text-decoration: none;
        }
    </style>
   <link rel="stylesheet" href="dist/DPlayer.min.css" />
        <script type="text/javascript" src="dist/DPlayer.min.js" ></script>
    <script type="text/javascript" src="dist/test.js" ></script>
    
</head>
<body>
    
<div style="height: 10%; width: 70%; margin: 0 auto;">
        输入u3m8URL:<input name="urls" id = "url" style="width: 70%; margin-top: 30px;" />
    
    <button onclick="submits()">提交</button>
</div>
<div id="dplayer"></div>
</body>   
<div class="card" style="width:100%;height:60%;margin-top:7.5%;">
        <div id="dplayer" class="background2"></div>
        <script>
            function submits() {
                
                 var url = document.getElementById("url");
                 alert(url.value);
                const dp = new DPlayer({
                    container: document.getElementById('dplayer'),
                    screenshot: true,
                    video: {
                    url: url.value,
                type: 'hls'
            }
            })
        }

</script>
</html>


上一篇下一篇

猜你喜欢

热点阅读