整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
瓜視頻播放器(HTML5)。
最近發(fā)現(xiàn)一個(gè)非常強(qiáng)大的播放器，它不僅支持視頻播放，還支持音頻播放。接下來，我們將詳細(xì)介紹它的功能和使用方法。
XGPlayer是字節(jié)跳動(dòng)團(tuán)隊(duì)推出的免費(fèi)開源HTML5視頻播放組件。我們可以通過npm或cdn的方式導(dǎo)入到項(xiàng)目中使用。作為字節(jié)跳動(dòng)的產(chǎn)品，XGPlayer的功能非常強(qiáng)大。在這里，我們可以實(shí)現(xiàn)西瓜視頻上使用的所有功能，所有功能模塊都設(shè)計(jì)成了插件。如果你想自定義效果，可以關(guān)閉內(nèi)置插件，自己開發(fā)。
個(gè)人認(rèn)為，XGPlayer播放器最大的優(yōu)勢在于支持多種主流的視頻格式，如hls、flv等視頻，以及自適應(yīng)碼率，為用戶提供更優(yōu)秀的播放體驗(yàn)。對于一些開發(fā)直播應(yīng)用的朋友來說，這簡直是福音。
除了這些優(yōu)點(diǎn)，它還擁有完整的產(chǎn)品機(jī)制、錯(cuò)誤監(jiān)控上報(bào)和自動(dòng)的降級(jí)處理、強(qiáng)大的mp三音頻、mp四視頻播放控制、點(diǎn)播無縫切換、帶寬節(jié)省顯著等優(yōu)點(diǎn)。
來看一下官方的示例代碼："//sf1-cd我們來看下官方的fe/xgplayer_doc_video/mp4/x。在創(chuàng)建播放器實(shí)例之前需要定義一個(gè)DOM來占位。
在播放器實(shí)例中必須先進(jìn)行配置參數(shù)，如通過volume定義初始音量，poster設(shè)置封面。thumbnail進(jìn)行進(jìn)度條預(yù)覽圖配置，該配置會(huì)用于pc端或者是移動(dòng)端的拖動(dòng)預(yù)覽。這就是目前的播放效果。
當(dāng)你設(shè)置screenShote的相關(guān)參數(shù)后，就會(huì)多了一個(gè)截圖的功能。關(guān)于彈幕功能，comments里面是彈幕的內(nèi)容，支持自定義樣式和彈幕顯示區(qū)域等。
最后是添加倍速的選項(xiàng)，"everybody Rate TIME TIME TIME TIME for back the source。最后是清晰度切換列表的配置，新增清晰度時(shí)把視頻路徑加上即可。
當(dāng)然，以上功能只是它的冰山一角。想要擁有更完整的體驗(yàn)，可以移步到西瓜視頻或官網(wǎng)。
還有一個(gè)fluid屬性值得一看，作用是是否啟用流式布局。開啟之后控制器就跑到了底部，而視頻區(qū)域則在屏幕中間。
HTML5video元素與audio元素屬性詳解
video元素和audio元素的屬性有很多，使用的方法也大同小異，在以往的實(shí)例中，我們分別介紹了video元素和audio元素在HTML5中的效果，其中也包括屬性的使用方法，本篇中將為大家介紹video元素和audio元素屬性的使用方法。
1.SRC屬性
設(shè)置音頻或視頻的URL地址。示例代碼如下圖所示：
HTML5中SRC屬性的使用方法
2.autoplay屬性
設(shè)置當(dāng)頁加載時(shí)，是否自動(dòng)播放音頻或視頻文件。如果需要自動(dòng)播放音頻/視頻文件，則添加該屬性，否則不添加該屬性，示例代碼如下圖所示：
HTML5中autoplay屬性的使用方法
3.preload屬性
設(shè)置頁面加載時(shí)，是否對音頻/視頻文件進(jìn)行預(yù)加載。preload屬性有三個(gè)可供選擇的值：none表示不進(jìn)行預(yù)加載；metadata表示僅加載元數(shù)據(jù)，即音頻/視頻文件的大小、第一幀、播放列表和持續(xù)時(shí)間等；auto表示加載全部音頻/視頻文件。示例代碼如下圖所示：
HTML5preload屬性的使用方法
4.poster屬性
該屬性是video元素屬性，設(shè)置當(dāng)視頻不可用時(shí)，向用戶展現(xiàn)一幅圖片。示例代碼如下圖所示：
HTML5中poster屬性的使用方法
5.loop屬性
設(shè)置是否循環(huán)播放音頻/視頻文件。如果要循環(huán)播放音頻/視頻文件，則添加該屬性，否則不添加該屬性。示例代碼如下圖所示：
HTML5中l(wèi)oop屬性的使用方法
6.controls屬性
設(shè)置是否添加瀏覽器自帶的播放控制器，其中包括播放、暫停和聲音等控件。如果需要顯示播放器，則添加該屬性，否則不添加該屬性。示例代碼如下圖所示：
HTML5中controls屬性的使用方法
7.width元素和height屬性
這兩個(gè)屬性是video元素屬性，width屬性用于指導(dǎo)視頻的寬度，height屬性用于指導(dǎo)視頻的高度，單位均為像素（px）。示例代碼如下圖所示：
HTML5中width元素和height屬性的使用方法
8.muted屬性
設(shè)置當(dāng)頁面加載時(shí)，播放器是否被靜音。如果需要靜音，則添加該屬性，否則不添加該屬性。示例代碼如下圖所示：
HTML5中muted屬性的使用方法
只要自己多練習(xí)，對代碼足夠熟悉就能夠運(yùn)用的比較好了，video元素與audio元素屬性的使用方法還是比較簡單的。了解跟多精彩文章請加我們的官方微信：pyyuanxing。謝謝大家的觀看。祝大家：生活愉快、身體健康。
兩天發(fā)布了一篇關(guān)于利用html5在手機(jī)端進(jìn)行撥號(hào)和發(fā)送短信的教程，今天再說一下利用html5在手機(jī)端調(diào)用攝像頭以及錄音的教程
在html5中可以利用type類型為file的input的標(biāo)簽調(diào)起手機(jī)的攝像頭
例：html5調(diào)用手機(jī)攝像頭進(jìn)行拍照
<input type="file" accept="image/*" capture="camera">
例：html5調(diào)用手機(jī)攝像頭進(jìn)行錄像
<input type="file" accept="video/*" capture="camera">
input 標(biāo)簽，不僅僅可以調(diào)用起手機(jī)的攝像頭，還可以錄音呢
例：
<input type="file" accept="audio/*" capture="microphone">
input accept 屬性
accept屬性可以限制可用文件的類型，當(dāng) input 標(biāo)簽的 type 屬性為 file 時(shí)，可以規(guī)定服務(wù)器所接受的文件類型
例如：
accept="audio/*" 表示所有音頻文件 accept="video/*" 表示視頻文件 accept="image/"* 表示圖片文件
當(dāng)然你也可以使用文件后綴名的形式
例：
accept="image/png* 表示只接收后綴名為 png 的圖片 accept="image/jpg* 表示只接收后綴名為 jpg 的圖片 accept=".png, .jpg, .jpeg" 表示可以同時(shí)接收 png jpg jpeg 后綴的文件
input capture 屬性
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
