小程序video控件的使用

　　小程序video控件用來實現(xiàn)播放視頻的效果，是小程序基本的系統(tǒng)組件，下面為大家介紹要如何使用。

　　一、屬性

　　| 屬性名 | 類型 | 默認(rèn)值 | 說明 | 最低版本 |

　　|——–|——–|——–|——–|——–|

　　| src | String| | 要播放視頻的資源地址 | |

　　| initial-time| String | | 指定視頻初始播放位置| 1.6.0 |

　　| duration |Number|| 指定視頻時長 | 1.1.0 |

　　| controls |Boolean |true| 是否顯示默認(rèn)播放控件(播放/暫停按鈕、播放進(jìn)度、時間)| |

　　| danmu-list |Object Array||彈幕列表 | |

　　| danmu-btn |Boolean|false | 是否顯示彈幕按鈕，只在初始化時有效，不能動態(tài)變更| |

　　| enable-danmu |Boolean|false| 是否展示彈幕，只在初始化時有效，不能動態(tài)變更 | |

　　|autoplay|Boolean|false|是否自動播放| |

　　|loop|Boolean|false|是否循環(huán)播放| 1.4.0 |

　　|muted|Boolean|false|是否靜音播放| 1.4.0 |

　　|page-gesture|Boolean|false|在非全屏模式下，是否開啟亮度與音量調(diào)節(jié)手勢|1.6.0 |

　　|direction|Number||設(shè)置全屏?xí)r視頻的方向，不指定則根據(jù)寬高比自動判斷。有效值為 0(正常豎向), 90(屏幕逆時針90度), -90(屏幕順時針90度)|1.7.0|

　　|bindplay|EventHandle||當(dāng)開始/繼續(xù)播放時觸發(fā)play事件| |

　　|bindpause|EventHandle||當(dāng)暫停播放時觸發(fā) pause 事件| |

　　|bindended|EventHandle||當(dāng)播放到末尾時觸發(fā) ended 事件| |

　　|bindtimeupdate|EventHandle||播放進(jìn)度變化時觸發(fā)，event.detail = {currentTime, duration} 。觸發(fā)頻率 250ms 一次| |

　　|bindfullscreenchange|EventHandle||當(dāng)視頻進(jìn)入和退出全屏是觸發(fā)，event.detail = {fullScreen, direction}，direction取為 vertical 或 horizontal| |

　　|objectFit|String|contain|當(dāng)視頻大小與 video 容器大小不一致時，視頻的表現(xiàn)形式。contain：包含，fill：填充，cover：覆蓋| 1.4.0|

　　|poster|String||視頻封面的圖片網(wǎng)絡(luò)資源地址，如果 controls 屬性值為 false 則設(shè)置 poster 無效| |

　　||||||

　　video 組件 默認(rèn)寬度300px、高度225px，可通過wxss設(shè)置寬高。

　　三、相關(guān)實現(xiàn)api

　　1、wx.createVideoContext

　　創(chuàng)建并返回 video 上下文 videoContext 對象。在自定義組件下，第二個參數(shù)傳入組件實例this，以操作組件內(nèi) video 組件

　　2、videoContext對象

　　videoContext 通過 videoId 跟一個 video 組件綁定，通過它可以操作一個 video 組件。

　　videoContext 對象的方法列表：

　　| 方法 | 參數(shù) | 說明 | 最低版本 |

　　|——–|——–|——–|——–|

　　|play | 無| 播放 | |

　　|pause| 無| 暫停 | |

　　|seek | position| 跳轉(zhuǎn)到指定位置，單位 s| |

　　|sendDanmu|danmu|發(fā)送彈幕，danmu 包含兩個屬性 text, color。||

　　|sendDanmu|danmu|發(fā)送彈幕，danmu 包含兩個屬性 text, color。||

　　|sendDanmu|danmu|發(fā)送彈幕，danmu 包含兩個屬性 text, color。||

　　|playbackRate|rate|設(shè)置倍速播放，支持的倍率有 0.5/0.8/1.0/1.25/1.5|1.4.0|

　　|requestFullScreen|無|進(jìn)入全屏，可傳入{direction}參數(shù)(1.7.0起支持)，詳見video組件文檔|1.4.0|

　　|exitFullScreen|無|退出全屏|1.4.0|

　HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。