javascript - 可以播放 MP3 并显示背景图像的 JavaScript 播放器?
问题描述
我正在一个显示音频/视频内容的网站上工作。对于视频,我使用 HTML5 视频标签。但是,如果是音频,我需要播放音频并在音频播放器中显示图像。是否有任何 html5/javascript 播放器支持在播放音频内容时在播放器中显示图像?
<audio controls>
<source src="http://hcmaslov.d-real.sci-nnov.ru/public/mp3/Cranberries/Cranberries%20'Dreams'.mp3" type="audio/mpeg">
</audio>
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/d/dc/Everybody_else_is_doing_it_so_why_can%27t_we_%28album_cover%29.jpg/220px-Everybody_else_is_doing_it_so_why_can%27t_we_%28album_cover%29.jpg">
解决方案
<video>
和<audio>
标签几乎相同,<video>
标签播放音频文件没有问题。使用poster
属性显示图像。
演示
<video controls autoplay poster='https://upload.wikimedia.org/wikipedia/en/thumb/d/dc/Everybody_else_is_doing_it_so_why_can%27t_we_%28album_cover%29.jpg/220px-Everybody_else_is_doing_it_so_why_can%27t_we_%28album_cover%29.jpg'>
<source src="http://home.saske.sk/~slavo/Audio/FOLK/Cranberries/The%20Cranberries%20-%20No%20Need%20To%20Argue/10%20-%20The%20Cranberries%20-%20Dreaming%20My%20Dreams.mp3" type="audio/mpeg">
</video>
推荐阅读
- c# - 不允许新事务,因为会话 ASP.Net MVC 中正在运行其他线程
- javascript - 用整数和字符串分隔数组
- mysql - 在特定字符后拆分 SQL 中的值
- ruby-on-rails - 如何提取 Rails 枚举的字段并获取整数数组?
- android - android中的u0_aXXX和u0_aXXX_cache有什么区别?
- pandas - 带有 ZIP 的 Pandas to_csv 压缩整个目录
- reactjs - 反应引导表下一个从按钮列表转换列切换到选择下拉列表?
- c# - Swashbuckle + ASP.Net Core WebApi:Swagger 文档不包含用于版本选择的 Request-Header 或 QueryParameter?
- python - 断言失败:[Condition x == y did not hold element-wise:] 函数调用堆栈:train_function
- amazon-ecs - 如何了解 ECS 的默认容量提供程序策略