如何创建像 youtube 这样的专业控件？答案

【问题标题】：How to create professional controls like youtube?如何创建像 youtube 这样的专业控件？
【发布时间】：2019-02-19 09:40:05
【问题描述】：

我正在处理 HTML，并希望接收像 youtube 这样的控件。
这是主要问题：

<video width="500" height="50" controls="controls">
     <source src="{{ song.audio_file.url }}">
 </video>

我想接收像 youtube 这样的“控件”或这种风格的东西，并且
不是您收到的默认值- default like this

我怎样才能得到这个控件？ -
like this controls:

【问题讨论】：

【解决方案1】：

<audio width="500" height="50" controls>
     <source src="{{ song.audio_file.url }}">
</audio>

我想你需要使用音频标签才能工作。

【讨论】：

【解决方案2】：

试试这个：

  <audio controls preload="auto">
        <source src="song.audio_file.url" type="audio/mpeg" />
    </audio>

对于铬

<iframe src="song.audio_file.url"  width="500" height="50" allow="autoplay">
</iframe>

我不知道您使用的是哪种文件格式。如果您遇到 mp3 文件问题，请尝试将 *.mp3 文件转换为 *.ogg 格式<source src="song.ogg" type="audio/ogg">并添加为第二个来源。此外，有时 192kbps 的 mp3 格式不起作用，因此请尝试 128kbps。

【讨论】：