jQuery Media插件是一個集成多媒體文件處理的插件,能夠自動探測頁面中媒體文件的類型,支持在線播放,缺點是file API不被瀏覽器兼容,自定義的樣式有所局限性. 以下介紹一些常用的用法:
$('audio,video').media({ width: 640, height: 360 });
以上代碼會在頁面中自動查找音頻和視頻標簽,并且為其應用默認值大小及帶有控件的媒體欄。這個插件還有許多可以自定義的選項,比如可以添加播放、暫停等按鈕。
$('#media').media({ width: '100%', height: 0, autoplay: true, transitionDuration: 1000, transitionPause: 3000 });
以上代碼為一個ID為media的容器添加了自動播放、漸變、暫停等功能。通過設置width:“100%”,可以讓視頻大小自適應,同時設置height:0,會根據視頻原本的長寬比自動計算,使得可以保持視頻的完整性并保持響應式布局。
$('audio,video').media({ features: ['playpause', 'current', 'progress', 'duration', 'tracks', 'volume', 'fullscreen'] });
以上代碼在視頻中添加了一些控制選項,包括播放暫停、進度條、時間、音量等等。還可以添加字幕、多語言支持等等。
$('audio,video').media({ pluginPath: '/plugins/', flashVars: { autoPlay: true, controlBarBackgroundColor: '#000' } });
以上代碼可以通過設置flashVars同時對flash的媒體播放器進行設置,比如自動播放、控制欄顏色等等。通過指定pluginPath,可以使用自己的自定義插件,以滿足更多的需求。