Question

我正在尝试使用音频标签的HTML5。而且我试图让播放器成为页面的整个宽度。我将主体和整个文档的填充和边距设置为0px，虽然我可以从页面顶部消除边距，但播放器仍然不会拉伸到页面的整个宽度。我想知道玩家是否有某种最大宽度，因为我没有对整个文档应用任何边距和填充，但它似乎没有什么区别。谢谢！代码如下：

PS：我现在忽略了Firefox，并使用了Chrome

编辑：我通过改变颜色来测试身体元素的伸展，并填充整个页面，所以我觉得必须有某种宽度限制，任何变通方法？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Zhaden's OST Playlist</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
    </head>

    <body>
        <audio id="audioBar" autoplay controls>
            <source src="C:\Users\zhaden\Music\iTunes\iTunes Media\Music\Final Fantasy 7 Piano Collection\Final Fantasy VII Piano Collection\05 Fighting.mp3" type="audio/mpeg"> <br>
             Your browser does not support the audio element.
        </audio>

    </body>
</html> 


html, body {
        overflow-x: hidden;     /* This is to ensure we don't allow horizontal scroll */
    }

    body {
        margin: 0px;            /* This is to delete the default margin */
    }

    #audioBar {
        width: 100%;            /* This is to set the audio bar to the full width of the page */
    }

Answer 1

带有“controls”属性的音频标签使用浏览器的默认播放器，您无法设置样式。解决方法是不使用浏览器控件并使用您自己的一些，您可以使用javascript。

你可以自己写点东西，或者使用类似的东西：jPlayer

Answer 2

播放器的最大宽度为800px宽。我会将此播放器设置为隐藏，并按照ShemSeger的回答使用另一个库。

Answer 3

这里有一些代码可以指出正确的方向：

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Wimpy Player - Fullscreen</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">


<!-- The following META tags are used to inform mobile-device browsers to present this page in full-screen mode.-->
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-title" content="Wimpy Player" />


<style type="text/css" media="screen">
    /* Make page fill device window */
    html, body {
        width : 100%;
        height : 100%;
        margin:0;
        padding:0;
        overflow:hidden;
        background-color:#484848;
    }
    /* For the Player Instance DIV */
    .full {
        left:0px;
        top:0px;
        width : 100%;
        height : 100%;
    }
</style>


<!-- Prevent entire page from "bouncing" -->
<script>document.addEventListener('touchmove',function(event){event.preventDefault();},false);</script>


</head>
<body>


<!-- NOTE: Change data-media to target media files or a playlist. -->
<video class="full" src="video.webm" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogg" type="video/ogg">
</video>


</body>
</html>

BTW：我建议你查看www.wimpyplayer.com，他们有一个不错的新HTML-5播放器。

Answer 4

您需要设置音频webkit元素的样式：

audio::-webkit-media-controls-enclosure, video::-webkit-media-controls-enclosure {
  max-width: 100%;
}

将Audio Player的宽度设置为屏幕宽度

4 个答案: