Html5 audio/video playback and CSS effect style matching

Over the past few days, I have been studying the style effect display problem in the html5 environment. htm5 labels are more concise. Combined with jquery and bootstrap3, I can make better page effects that I want. Here we will introduce the js library used for audio and video playback: audio. js http://kolber.github.io/audiojs/ You can easily complete the following steps: InstallationPut 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/juicyloud" preload = "auto"/> video playback: video-js http://www.videojs.com/ You can easily perform the following steps: <link href = "// canonical" 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/ogy'/> </video> final effect: