html5音视频播放及CSS效果样式搭配
这里介绍下音视频播放用到的js库:
音频播放:
audio.js
http://kolber.github.io/audiojs/
经过下面几步轻松搞定:
Installation
Put audio.js, player-graphics.gif & audiojs.swf in the same folder.
Include the audio.js file:
<script src="/audiojs/audio.min.js"></script>
Initialise audio.js:
<script>
audiojs.events.ready(function() {
var as = audiojs.createAll();
});
</script>
Then you can use <audio> wherever you like in your HTML:
<audio src="/mp3/juicy.mp3" preload="auto" />
视频播放:
video-js
http://www.videojs.com/
经过下面几步也可以轻松搞定:
<link href="//example.com/path/to/video-js.css" rel="stylesheet">
<script src="//example.com/path/to/video.js"></script>
<script>
videojs.options.flash.swf = "http://example.com/path/to/video-js.swf"
</script>
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":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>
最终效果: