在HTML5视频API播放器中使用HTML5音频API功能

蒂姆·兰伯特

此小部件可让您使用HTML5音频API来检测音频文件的波长幅度。在此页面上(http://codepen.io/datanity/pen/gaweb),您会看到一个变色的点,作为此检测的证据。

我试图保持这种幅度检测功能,但不是使用.wav文件,而是使用视频文件。

如果在第65行上,如果使用下面的.mp4而不是当前的.wav替换audio.src ='...',则将播放.mp4的音频,圆圈仍会根据振幅改变颜色,但是视频图像本身将不可见。

//9a27bbc586dd80f4a734-4d0355cf9e89be09aa440f2192ff2da0.r28.cf1.rackcdn.com/exam-speaking-test-talk-about-yourself.mp4(为方便起见,示例为mp4)

我的问题是:是否可以保留本示例中所示的HTML5音频API的好处,但同时也使用HTML5视频API,因此您也可以观看视频。

丢失计算机

是。只需将音频元素更改为视频元素即可。这是修改后的代码:http : //codepen.io/anon/pen/phKuF

  var vid = document.createElement('video'); //use video instead of audio
  vid.src = 'http://9a27bbc586dd80f4a734-4d0355cf9e89be09aa440f2192ff2da0.r28.cf1.rackcdn.com/exam-speaking-test-talk-about-yourself.mp4'; //video file
  vid.controls = true;
  vid.preload = 'auto';

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

视频播放器:HTML5 vs Youtube API

来自分类Dev

视频播放器:HTML5 vs Youtube API

来自分类Dev

使用Web音频API构建HTML5音频播放器

来自分类Dev

HTML5视频播放器:动态加载视频

来自分类Dev

如何使html5音频播放器响应?

来自分类Dev

样式化HTML5音频播放器

来自分类Dev

如何在html5音频和视频播放器中回显php数组?

来自分类Dev

如何制作通用的HTML5视频播放器

来自分类Dev

html5视频播放器错误处理

来自分类Dev

HTML5视频播放器进度栏更新

来自分类Dev

HTML5视频播放器全屏问题

来自分类Dev

媒体视频播放器HTML5 JS

来自分类Dev

将这个html5视频播放器的静音/取消静音功能反转

来自分类Dev

html5视频播放器进度栏单击功能

来自分类Dev

如何修复干扰Firefox默认HTML5视频播放器的功能

来自分类Dev

反转静音/取消静音功能,此特定的html5视频播放器

来自分类Dev

使用HTML5在React中构建简单的音频播放器时遇到麻烦

来自分类Dev

HTML5音频播放器无法在Safari或IE上与jQuery一起使用

来自分类Dev

HTML5音频播放器无法在Safari或IE上与jQuery一起使用

来自分类Dev

通过$ http服务使用AngularJs的HTML5音频播放器

来自分类Dev

使用AngularJS自定义HTML5视频播放器控件

来自分类Dev

是否存在不允许Periscope使用HTML5视频播放器的技术限制?

来自分类Dev

使用PHP将视频文件加载到html5播放器

来自分类Dev

制作HTML链接以播放音频(没有HTML5播放器)

来自分类Dev

制作HTML链接以播放音频(没有HTML5播放器)

来自分类Dev

移动浏览器上的“自动播放” HTML5音频播放器

来自分类Dev

如何使用JavaScript和HTML5播放器更改当前正在播放的YouTube视频的播放速度?

来自分类Dev

切换SHOUTcast音频流HTML5音频播放器和JQuery

来自分类Dev

切换SHOUTcast音频流HTML5音频播放器和JQuery

Related 相关文章

  1. 1

    视频播放器:HTML5 vs Youtube API

  2. 2

    视频播放器:HTML5 vs Youtube API

  3. 3

    使用Web音频API构建HTML5音频播放器

  4. 4

    HTML5视频播放器:动态加载视频

  5. 5

    如何使html5音频播放器响应?

  6. 6

    样式化HTML5音频播放器

  7. 7

    如何在html5音频和视频播放器中回显php数组?

  8. 8

    如何制作通用的HTML5视频播放器

  9. 9

    html5视频播放器错误处理

  10. 10

    HTML5视频播放器进度栏更新

  11. 11

    HTML5视频播放器全屏问题

  12. 12

    媒体视频播放器HTML5 JS

  13. 13

    将这个html5视频播放器的静音/取消静音功能反转

  14. 14

    html5视频播放器进度栏单击功能

  15. 15

    如何修复干扰Firefox默认HTML5视频播放器的功能

  16. 16

    反转静音/取消静音功能,此特定的html5视频播放器

  17. 17

    使用HTML5在React中构建简单的音频播放器时遇到麻烦

  18. 18

    HTML5音频播放器无法在Safari或IE上与jQuery一起使用

  19. 19

    HTML5音频播放器无法在Safari或IE上与jQuery一起使用

  20. 20

    通过$ http服务使用AngularJs的HTML5音频播放器

  21. 21

    使用AngularJS自定义HTML5视频播放器控件

  22. 22

    是否存在不允许Periscope使用HTML5视频播放器的技术限制?

  23. 23

    使用PHP将视频文件加载到html5播放器

  24. 24

    制作HTML链接以播放音频(没有HTML5播放器)

  25. 25

    制作HTML链接以播放音频(没有HTML5播放器)

  26. 26

    移动浏览器上的“自动播放” HTML5音频播放器

  27. 27

    如何使用JavaScript和HTML5播放器更改当前正在播放的YouTube视频的播放速度?

  28. 28

    切换SHOUTcast音频流HTML5音频播放器和JQuery

  29. 29

    切换SHOUTcast音频流HTML5音频播放器和JQuery

热门标签

归档