Question

我正在尝试嵌入一个音频文件，在网站的背景中显示图片。（继续之前注意：我使用的网站是由其他人托管的，我必须使用他们的CSS，所以我可以调整体内的html，包括内联css，但我无法调整css本身。另外，我＆＃ 39;这是网络编程的新手，所以请原谅这篇文章中的任何愚蠢行为。）

我已经找到了几种方法来做我想要的在PC浏览器上看起来很好的东西，但是所有这些方法至少部分地在iOS设备上失败了。我尝试过的三个解决方案是：

jwplayer。这里的问题是iOS与闪存不兼容，但它在PC操作系统上看起来很棒。代码如下所示：

<span id="pod_video_1">&nbsp;</span>
<script type="text/javascript">
    var pod_video_flashvars_1 = {
        file: "http%3A%2F%2Fpath%2Fto%2file.mp3",
        image: "http%3A%2F%2Fpath%2Fto%2image.jpg"
    };
    var pod_video_params_1 = {
        allowfullscreen: "true",
        allowscriptaccess: "always"};
    swfobject.embedSWF("https://path/mediaplayer.swf", "pod_video_1", "400", "300", "9.0.0", "", pod_video_flashvars_1, pod_video_params_1);
</script>

HTML视频标记。这个在PC操作系统中看起来不错（虽然不如jwplayer好），在iPad上也不错。然而，在iPhone上，我遇到的问题是它在海报图像上放置了一个巨大的播放按钮，它覆盖了图像（如果我可以强制图像上的播放按钮更小，那将是理想的）。代码：
```
<video controls poster="http://path/to/image.jpg"> 
    <source src="http://path/to/file.mp3" type="video/mp4"> 
</video>
```
HTML音频标签，上面有一张图片。这里的问题是音频条看起来太大并且在iPhone上被切断了，但是如果我手动调整大小，它就会被搞砸到其他设备上。代码：
```
<img src="http://path/to/image.jpg">
<audio controls style="width: 400px; height: YYpx;"> 
    <source src="http://path/to/file.mp3" type="audio/mp3"> 
</audio>
```

有没有人知道如何克服这个难题，在iOS设备和其他操作系统上获得良好的显示效果？

非常感谢您的帮助。

HTML在PC和iOS上嵌入带有海报图像的音频文件

0 个答案: