将音频播放器的宽度设置为屏幕宽度答案

【问题标题】：Setting width of Audio Player to screen width将音频播放器的宽度设置为屏幕宽度
【发布时间】：2018-10-19 02:56:09
【问题描述】：

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

PS：我暂时忽略了 Firefox，而使用 Chrome

编辑：我通过更改颜色测试了 body 元素的拉伸，它填满了整个页面，所以我觉得必须有某种宽度限制，有什么解决方法吗？

<!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 */
    }

【问题讨论】：

标签： css html html5-audio

【解决方案1】：

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

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

顺便说一句：我建议您访问 www.wimpyplayer.com，他们有一个不错的新 HTML-5 播放器。

【讨论】：

【解决方案2】：

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

你可以自己写一些东西，或者使用这样的东西：jPlayer

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

【讨论】：