Как создать профессиональные элементы управления, такие как YouTube?

Question

Я работаю над HTML и хотел бы получить элементы управления, такие как YouTube.
Это главная проблема:

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

Я хочу получить «элементы управления», такие как YouTube или что-то в этом стиле, и
не по умолчанию, который вы получаете - по умолчанию, как это

как я могу получить этот контроль? -
как этот элемент управления:

Answer 1

Попробуйте:

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

Для Chrome

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

Я не знаю, какой формат файла вы используете.Если у вас возникли проблемы с файлом mp3, попробуйте преобразовать файл * .mp3 в формат * .ogg <source src="song.ogg" type="audio/ogg"> и добавить его в качестве второго источника.Кроме того, иногда формат mp3 со скоростью 192 кбит / с не работает, поэтому попробуйте 128 кбит / с.

Answer 2

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

Я полагаю, вам нужно использовать звуковую метку, чтобы это работало.