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>

最终效果：

这里介绍下音视频播放用到的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>

最终效果：

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！