这几天一直在研究html5环境下样式效果展现问题,htm5的标签更加简洁,结合jquery和bootstrap3,能够很好地做出自己想要的比较绚丽的页面特效。
这里介绍下音视频播放用到的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>
最终效果: