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