全部产品

视频

更新时间:2020-08-17 15:41:54

my.createVideoContext

该接口用于传入 video id,返回一个 videoContext 上下文。video id 为开发者在对应 video 标签中自由命名的 ID 属性。

通过 videoContext 可以操作一个 video 组件

版本要求:基础库版本 1.14.1 开始支持。

效果示例

createVideoContext

代码示例

.axml 文件中写入如下代码来命名 video id。video id 为开发者在对应 video 标签中自由命名的 ID 属性,例如下方代码中的 myVideo

  1. <view>
  2. <!-- onPlay 的类型是 EventHandle。为当开始/继续播放时触发 play 事件。 -->
  3. <video id="myVideo" src="{{src}}" onPlay="{{onPlay}}" enableNative="{{true}}"></video>
  4. <button type="default" size="defaultSize" onTap="play"> Play </button>
  5. <button type="default" size="defaultSize" onTap="pause"> Pause </button>
  6. <button type="default" size="defaultSize" onTap="stop"> stop </button>
  7. <button type="default" size="defaultSize" onTap="seek"> seek </button>
  8. <button type="default" size="defaultSize" onTap="requestFullScreen"> requestFullScreen </button>
  9. <button type="default" size="defaultSize" onTap="exitFullScreen"> exitFullScreen </button>
  10. <button type="default" size="defaultSize" onTap="mute"> mute </button>
  11. </view>

.js 文件中写入如下代码:

  1. Page({
  2. data: {
  3. // src 为要播放的视频资源地址。src 支持 apFilePath: https://resource/xxx.video。
  4. src: "http://flv.bn.netease.com/tvmrepo/2012/7/C/7/E868IGRC7-mobile.mp4",
  5. },
  6. onLoad() {
  7. this.videoContext = my.createVideoContext('myVideo');
  8. },
  9. play() {
  10. this.videoContext.play();
  11. },
  12. pause() {
  13. this.videoContext.pause();
  14. },
  15. stop() {
  16. this.videoContext.stop();
  17. },
  18. seek() {
  19. this.videoContext.seek(100);
  20. },
  21. requestFullScreen() {
  22. this.videoContext.requestFullScreen({
  23. direction: 0
  24. });
  25. },
  26. exitFullScreen() {
  27. this.videoContext.exitFullScreen();
  28. },
  29. mute() {
  30. this.videoContext.mute(false);
  31. },
  32. });

videoContext 方法列表

方法 参数 类型 描述
play - 播放。
pause - 暂停。
stop - 停止。
seek position Number 跳转到指定位置,单位为秒(s)。
requestFullScreen direction Number 进入全屏。
  • 0 为正常竖屏。
  • 90 为横屏。
  • -90 为反向横屏。
exitFullScreen - 退出全屏。
showStatusBar - 显示状态栏,仅在 iOS 全屏下有效。
hideStatusBar - 隐藏状态栏,仅在 iOS 全屏下有效。
mute ison Boolean 切换静音状态。
playbackRate rate Number 设置倍速播放 (0.5 ≤ rate ≤ 2.0)。mPaaS 暂不支持