如何使用Javascript在Safari HTML5播放器中使用iOS锁定屏幕上一个/下一个播放器按钮

时间:2022-08-24 10:43:28

In Safari on iOS, when the <audio> DOM element is playing a sound file, you can pause/restart it via the device lock screen.

在iOS上的Safari中,当

Question: Is there an event that I can listen for on that <audio> element that gets fired when the user clicks the next or previous buttons on that lock screen?

问题:当用户单击该锁定屏幕上的下一个或上一个按钮时,是否有可以在

Bonus question: In Safari via HTML5 and Javascript, is there a way to show the audio file's meta data on that lock screen like you can with an app?

奖金问题:在Safari中通过HTML5和Javascript,有没有办法像在应用程序中一样在锁定屏幕上显示音频文件的元数据?

2 个解决方案

#1


6  

I don't know the answer to your first question.

我不知道你的第一个问题的答案。

It is possible to show a song title (or other text) simply by adding an HTML title tag to your audio element.

只需在音频元素中添加HTML标题标签,即可显示歌曲标题(或其他文字)。

var player = getElementById('my_audio_element'); player.setAttribute('title', 'My Song Title');

var player = getElementById('my_audio_element'); player.setAttribute('title','My Song Title');

Unfortunately, it does not work to add an image in the same manner.

不幸的是,它不能以相同的方式添加图像。

#2


-1  

To add a title and a poster image you could do something like:

要添加标题和海报图像,您可以执行以下操作:

<video width="320" height="180" src="source.mp4" poster="poster.png">

#1


6  

I don't know the answer to your first question.

我不知道你的第一个问题的答案。

It is possible to show a song title (or other text) simply by adding an HTML title tag to your audio element.

只需在音频元素中添加HTML标题标签,即可显示歌曲标题(或其他文字)。

var player = getElementById('my_audio_element'); player.setAttribute('title', 'My Song Title');

var player = getElementById('my_audio_element'); player.setAttribute('title','My Song Title');

Unfortunately, it does not work to add an image in the same manner.

不幸的是,它不能以相同的方式添加图像。

#2


-1  

To add a title and a poster image you could do something like:

要添加标题和海报图像,您可以执行以下操作:

<video width="320" height="180" src="source.mp4" poster="poster.png">