line-height: 2;box-sizing: border-box;" powered-by="xiumi.us">
随着小程序生态的蓬勃发展，用户可以在小程序流畅地浏览视频、观看直播等。手机的便携性让用户拥有更方便的使用体验，然而针对浏览视频或直播的场景，大屏幕的使用体验更好。
为了满足大屏幕使用场景的需求，小程序团队推出 投屏能力，提供快速投屏以及自定义投屏等多种功能。
url="https://findermp.video.qq.com/251/20304/stodownload?encfilekey=rjD5jyTuFrIpZ2ibE8T7Ym3K77SEULgkiaUicicH5QvcMokdkOcqE1iafbbvNdBIsGsXasc4tWC1FK2icmSPFUuEB8CdsOsFyQNtfQrCRzlKCaxyBr1bzYAic7Lng&bizid=1023&dotrans=0&hy=SZ&idx=1&m=&scene=0&token=x5Y29zUxcibAg6IC9vicwrHg7NYvbvsQiasRX3icHUrWHZyvtIpFHicFTzyhPPLvshQpTE3EvwrWxHLE" data-headimgurl="http://wx.qlogo.cn/finderhead/ZMdxSDafpxSGVTLWu3FF2mswSNAD6A6fpC0e5LJqt9ibUIEI6oe0xZw/0" data-username="v2_060000231003b20faec8c6eb8b1ec2dccd06ef35b0776d7187471641ee32095a26efda23b00d@finder" data-nickname="微信开发者" data-desc="小程序投屏，大屏体验真的行！浏览视频、观看直播更方便啦！
#小程序 #小程序开发 #投屏 @微信学堂" data-nonceid="17031615537324750077" data-type="video" data-mediatype="undefined" data-authiconurl="https://dldir1v6.qq.com/weixin/checkresupdate/icons_filled_channels_authentication_enterprise_a2658032368245639e666fb11533a600.png" data-from="new" data-width="1080" data-height="1920" data-id="export/UzFfAgtgekIEAQAAAAAA-GsQfVKHpQAAAAstQy6ubaLX4KHWvLEZgBPEmoN0cARbXomHzNPgMIulpHaywlkwX-5c0Xp5W5jU" data-isdisabled="0" data-errortips="">
针对浏览视频等场景，小程序 video 组件 新增 show-casting-button 配置。配置成功后，视频上方即可显示投屏按钮，无需设计优化，方便又快捷。
<!-- show-casting-button: 显示投屏按钮 --><video id="myVideo" src="https://example.com/xxx" show-casting-button="{{true}}" ></video>
面对不同的视频内容，投屏按钮的位置、尺寸、颜色等需要进行个性化的调整，因此自定义投屏按钮非常必要。
小程序 video 组件支持调用 API 进行投屏，生成自定义投屏按钮，步骤如下：
1、通过 wx.createVideoContext 获取 video 上下文
2、调用对应的投屏 API 实现投屏 / 切换 / 重新连接 / 退出等操作
3、调用接口成功后，获取投屏相关回调，例如投屏成功 / 失败 / 被中断等结果，了解投屏使用情况
<video id="myVideo" src="https://example.com/xxx" > <button bindtap="casting">投屏</button></video>
casting() { this.videoContext = wx.createVideoContext('myVideo') this.videoContext.startCasting({})}
除了 video 组件，live-player 组件 同样支持调用 API 进行自定义投屏，丰富直播场景的使用体验。调用步骤与 video 组件一致。
<!-- enable-casting：开启投屏配置 --><live-player id="player" enable-casting="{{true}}" src="https://example.com/xxx" mode="live" > <button bindtap="casting">投屏</button></live-player>
casting() { this.ctx = wx.createLivePlayerContext('player') this.ctx.startCasting({})}
随着用户使用习惯的变化，小程序团队支持 投屏能力，提供快速投屏及自定义投屏的功能，满足用户对于大屏幕场景的使用需求，提升用户体验。
如有小程序相关的问题，可在 微信开放社区 发帖互动，技术专员将为大家解答及进行深度交流。
