HTML5 视频 - 仅从视频中获取配乐答案

【问题标题】：HTML5 video - Get only soundtrack from videoHTML5 视频 - 仅从视频中获取配乐
【发布时间】：2013-08-06 21:31:27
【问题描述】：

我想加载一个只向用户呈现视频声音的视频。其实如果只能下载视频里的音轨就好了。

是否可以加载带有标签的视频然后只获取声音？

视频以 .m4v 或 .mp4 文件扩展名编码为 H.264 编解码器。

【问题讨论】：

标签： html audio video

【解决方案1】：

我认为只下载音轨是不可能的，所以无论如何你必须播放视频，但你可以隐藏它。

您可以使用 js 库（例如 jplayer 或 videojs，因此您有控件）并通过 css 删除视频。

看看这个 js-fiddle：http://jsfiddle.net/8Hm6y/

将插件插入文档的头部：

<link href="http://vjs.zencdn.net/4.1/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.1/video.js"></script>

您指定源文件的 HTML：

<video id="" class="video-js vjs-default-skin"
  controls preload="auto" data-setup='{"controls": true}'>
 <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
 <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
 <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
</video>

CSS：

#vjs_video_4_html5_api {  
    display:none; /* remove video */
}
.vjs-big-play-button {
    display:none !important;  /* remove play button inside video*/
}

#vjs_video_4{
    height:38px !important;  /* make container smaller */
}

.vjs-control-bar {  /* make controlbar visible */
    visibility: visible !important;
    opacity: 1 !important;
    transition-duration: 0s!important;
    display:block !important;
}

在这种情况下，我使用了 videojs，所以我有视频的控件，然后我用 css 隐藏了视频。随意调整 CSS 以满足您的需求。

希望对您有所帮助。

【讨论】：

感谢您的反馈 :) 当我们开发该模块时，我会尝试您的一些建议。