当前位置: 移动技术网 > IT编程>网页制作>Html5 > html5音视频播放及CSS效果样式搭配

html5音视频播放及CSS效果样式搭配

2018年02月18日  | 移动技术网IT编程  | 我要评论
这几天一直在研究html5环境下样式效果展现问题,htm5的标签更加简洁,结合jquery和bootstrap3,能够很好地做出自己想要的比较绚丽的页面特效。   &
这几天一直在研究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>

 

最终效果:

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网