<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" />

<view class="container page" data-weui-theme="{{theme}}">
  <template is="head" data="{{title: 'video'}}"/>

  <view class="page-body">
    <view class="page-section tc">
      <video 
        id="myVideo" 
        src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" 
        binderror="videoErrorCallback" 
        danmu-list="{{danmuList}}" 
        enable-danmu 
        danmu-btn 
        show-casting-button
        show-screen-lock-button
        show-center-play-btn='{{false}}' 
        show-play-btn="{{true}}" 
        muted="{{true}}" show-mute-btn="{{true}}"
        controls
        picture-in-picture-mode="{{['push', 'pop']}}"
        bindenterpictureinpicture='bindVideoEnterPictureInPicture'
        bindleavepictureinpicture='bindVideoLeavePictureInPicture'
        enable-auto-rotation="{{enableAutoRotation}}"
      ></video>
      <view class="auto-rotate-container">
        <view>开启自动旋转</view>
        <view>
          <switch model:checked="{{ enableAutoRotation }}" bindchange="handleSwitchChange" />
        </view>
      </view>
      <view class="weui-cells">
        <view class="weui-cell weui-cell_input">
          <view class="weui-cell__hd">
            <view class="weui-label">弹幕内容</view>
          </view>
          <view class="weui-cell__bd">
            <input bindblur="bindInputBlur" class="weui-input" type="text" placeholder="在此处输入弹幕内容" />
          </view>
        </view>
      </view>
      <view class="btn-area">
        <button bindtap="bindSendDanmu" class="page-body-button" type="primary" formType="submit">发送弹幕</button>
      </view>
      <view class="btn-area">
        <navigator url="picture-in-picture" hover-class="other-navigator-hover">
          <button type="primary" class="page-body-button" bindtap="bindPlayVideo">小窗模式</button>
        </navigator>
      </view>
      
    </view>
  </view>

  <template is="foot" />
</view>
