百度智能小程序——video引入

在swan文件中加入

        <view class="wrap">
            <video id="myVideo" enable-danmu="true" src="https://b.bdstatic.com/swan-temp/940fe716b0eaad38f47b209d61657490.mp4"></video>
        </view>

or

        <view class="wrap">
            <video id="myVideo" enable-danmu="true" src="{{video_Src}}"></video>
        </view>

在这里src的播放流为mp4

在js文件中

在初始化阶段 将video挂载

onLoad(options) {
	
        //video
        const videoContext = swan.createVideoContext('myVideo');
        console.log(videoContext);
        this.videoContext = videoContext;
}

设置外部播放函数

可以自定义控制播放
在swan中

    <button type="primary" bindtap="play">play</button>

在js中

    play() {
        this.videoContext.play();
    },

设置外部暂停函数

可以自定义控制暂停
在swan中

<button type="primary" bindtap="pause">pause</button>

在js中

    pause() {
        this.videoContext.pause();
    }

设置指定跳转

在swan中

<button type="primary" bindtap="seek">seek</button>

在js中
这个参数中的是秒数

    seek() {
        this.videoContext.seek(180);
    }

发送弹幕

在swan中

<button type="primary" bindtap="sendDanmu">sendDanmu</button>

在js中

    sendDanmu() {
        this.videoContext.sendDanmu({
            text: '这是一条弹幕',
            color: '#f60'
        });
    }

按照指定方向进入全屏

在swan中

 <button type="primary" bindtap="requestFullScreen">点击全屏</button>

在js中

    requestFullScreen() {
        this.videoContext.requestFullScreen({direction: 90});
    }

其中direction的参数值
0 、90、-90
其中 0 代表的是正常竖向
其中 90 代表的是屏幕顺时针90度
其中 -90 代表的是屏幕逆时针90度

退出全屏

在swan中

<view>设置5s内自动退出全屏</view>

在js中

onLoad() {
        let that = this;
        setTimeout(function () {
        ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
            that.videoContext.exitFullScreen();
         ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑
        }, 5000);
   }

显示状态栏 仅在ios全屏下有效

在swan中

 <button bindtap="showStatusBar">点击显示状态栏</button>

在js中

 showStatusBar() {
        this.videoContext.requestFullScreen({direction: 90});
        let that = this;
        setTimeout(function () {
            this.videoContext.showStatusBar();
        })
    }

												ios13不支持

隐藏状态栏，仅在iOS全屏下有效。

在swan中

 <button bindtap="hideStatusBar">点击隐藏状态栏</button>

在js中

    hideStatusBar() {
        this.videoContext.requestFullScreen({direction: 90});
        let that = this;
        setTimeout(function () {
            this.videoContext.hideStatusBar();
        })
    }

停止播放

在swan中

<button type='primary' bindtap="videoContextStop">点击停止播放</button>

在js中

    videoContextStop() {
        this.videoContext.stop();
    }

倍速播放视频

在swan中

    <button type='primary' data-set="0.75" bindtap="playbackRate">点击0.75倍速播放</button>
    <button type='primary' data-set="1.0" bindtap="playbackRate">点击1.0倍速播放</button>
    <button type='primary' data-set="1.25" bindtap="playbackRate">点击1.25倍速播放</button>
    <button type='primary' data-set="1.5" bindtap="playbackRate">点击1.5倍速播放</button>
    <button type='primary' data-set="2.0" bindtap="playbackRate">点击2.0倍速播放</button>

在js中

    playbackRate(e) {
        console.log(e);
        this.videoContext.playbackRate(+e.target.dataset.set);
    }