标签：videoContext swan js 智能 点击 video 90 播放 百度

在swan文件中加入

        <view class="wrap">
            <video id="myVideo" enable-danmu="true" src="https://b.bdstatic.com/swan-temp/940fe716b0eaad38f47b209d61657490.mp4"></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);
    }

• 点赞
• 收藏
• 分享
• • 文章举报

HarryHY 发布了110 篇原创文章 · 获赞 2 · 访问量 8947 私信 关注

标签：videoContext,swan,js,智能,点击,video,90,播放,百度
来源： https://blog.csdn.net/HarryHY/article/details/104178947

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。