微信小程序实时音视频的使用

article/2025/10/29 12:17:15

小程序提供的live-pusher组件和live-player组件主要用于两种场景：一个是用于视频直播，另一个是用于为您的小程序提供实时音视频相关的功能。live-pusher和live-player两个组件，都有一个叫做 RTC 的模式，通过这种模式，可以在小程序中实现实时视频通话功能。本文我们介绍如何使用live-pusher组件和live-player组件以及腾讯云实时音视频产品来开发一个视频通话的小程序。

实时音视频产品架构

腾讯实时音视频（Tencent Real-Time Communication，TRTC），将腾讯多年来在网络与音视频技术上的深度积累，主打低延时互动直播和多人音视频两大解决方案，通过腾讯云服务向开发者开放，致力于帮助开发者快速搭建低成本、低延时、高品质的音视频互动解决方案。
在这里插入图片描述

产品功能

  • 视频通话
    即两人或多人视频通话，支持720P、1080P高清画质。单个房间最多支持300人同时在线，最多支持50人同时开启摄像头。
  • 语音通话
    即两人或多人语音通话，支持 48kHz，支持双声道。单个房间最多支持300人同时在线，最多支持50人同时开启麦克风。
  • 视频互动直播
    支持主播与观众视频连麦互动。支持主播跨房间（跨直播间）PK。支持平滑上下麦，切换过程无需等待，主播延时小于300ms。单个房间可上麦人数无限制，最多支持50人同时连麦。低延时直播模式下，支持10万观众同时播放，播放延时低至1000ms。CDN 旁路直播模式下，观众数量无限制。
  • 语音互动直播
    支持主播与观众语音连麦互动。支持主播跨房间（跨直播间）PK。支持平滑上下麦，切换过程无需等待，主播延时小于300ms。单个房间可上麦人数无限制，最多支持50人同时连麦。低延时直播模式下，支持10万观众同时播放，播放延时低至1000ms。CDN 旁路直播模式下，观众数量无限制。

实时音视频SDK使用说明

使用腾讯实时音视频SDK前需要首先注册腾讯云账号并完成 实名认证。注册成功后需要在实时音视频产品中创建一个实时音视频应用，腾讯云会为您的应用分配一个SDKAppID以及相应的UserSig的密钥， 后续的编码中会用到这两个参数。创建实时音视频应用的操作方法为：登录实时音视频控制台，选择【应用管理】->【创建应用】：
在这里插入图片描述
创建实时音视频应用成功后可以在应用的列表界面中看到SDKAppID：
在这里插入图片描述
点击上图中的【功能配置】，可以在打开页面的【快速上手】中看到UserSig的密钥：
在这里插入图片描述
另外在编码前还需要下载trtc-wx.js文件，该文件将用于接下来的小程序视频通话页面，请通过以下的url地址来下载trtc-wx.js文件：
https://web.sdk.qcloud.com/trtc/miniapp/download/trtc-wx.zip

API 使用指引

下图是腾讯实时音视频SDK文档中给出的实时音视频小程序API的调用时序图：
在这里插入图片描述

步骤1：初始化TRTC

在 trtc-wx 包中导出的是一个名为 TRTC 的类，您需要在页面onLoad函数中实例化这个类，同时创建 Pusher，并监听 TRTC 抛出的事件。

onLoad(options) {//初始化 TRTC 实例this.TRTC = new TRTC(this)
//创建 Pusher
const pusher = this.TRTC.createPusher({beautyLevel: 9})//事件监听this.bindTRTCRoomEvent()},

使用TRTC类的on(EventCode, handler, context)方法监听TRTC抛出的事件，例如：

//事件监听bindTRTCRoomEvent() {const TRTC_EVENT = this.TRTC.EVENTthis.TRTC.on(TRTC_EVENT.ERROR, (event) => {console.log('* room ERROR', event)})
}

步骤2：开始推流

首先需要调用enterRoom方法进入TRTC房间，之后您可以调用start() 方法开始推流。

onLoad(options) {this.TRTC = new TRTC(this)const pusher = this.TRTC.createPusher({beautyLevel: 9})this.bindTRTCRoomEvent()
//进入房间
this.TRTC.enterRoom(this.data._rtcConfig)
//开始推流
this.TRTC.getPusherInstance().start() }

调用enterRoom(params)方法后，若房间不存在，系统将自动创建一个新房间，否则直接进入房间，enterRoom(params)的参数说明如下：

  • sdkAppID：您的腾讯云账号的 sdkAppID
  • userID：您进房的 userID
  • userSig：您服务器签发的 userSig
  • roomID：您要进入的房间号，如该房间不存在，系统会为您自动创建
  • strRoomID：您要进入的字符串房间号，如填写该参数，将优先进入字符串房间
  • scene：必填参数，使用场景：
    rtc：实时通话，采用优质线路，同一房间中的人数不应超过300人。
    live：直播模式，采用混合线路，支持单一房间十万人在线（同时上麦的人数应控制在50人以内）

步骤3：对于远端流进行处理

如果收到远端新增视频流，您可以开始播放这路视频，将这个 player 的 muteVideo 状态设置为 false，这里需要您传入这个 player 的 id，更新完成后会返回给您更新后的playerList列表，您只需要将页面的 playerList 同步更新即可。

this.TRTC.on(TRTC_EVENT.REMOTE_VIDEO_ADD, (event) => {console.log('* room REMOTE_VIDEO_ADD',  event)const { player } = event.datathis.setPlayerAttributesHandler(player, { muteVideo: false })})

如果收到这个远端流减少的通知时，您可以取消对这一路的订阅，将 muteAudio 设置为 true。

    this.TRTC.on(TRTC_EVENT.REMOTE_VIDEO_REMOVE, (event) => {console.log('* room REMOTE_VIDEO_REMOVE', event)const { player } = event.datathis.setPlayerAttributesHandler(player, { muteVideo: true })})

步骤4：结束音视频通话

调用exitRoom()退出房间，退出房间时需要重置状态机的状态，并同步到页面中，防止下次进房发生状态的混乱。

_hangUp() {const result = this.TRTC.exitRoom()this.setData({pusher: result.pusher,playerList: result.playerList,})wx.navigateBack({delta: 1,})}

步骤5：控制是否上行本地音视频流

如若需要变更 live-pusher 标签上 enable-mic 和 enable-camera 的属性，您可以通过调用 setPusherAttributes 函数对状态机中管理的推流状态进行改变，并将返回给您更新后的状态值更新到页面中。

//上行音频流
this.setData({pusher: this.TRTC.setPusherAttributes({enableMic: true})
})
//上行视频流
this.setData({pusher: this.TRTC.setPusherAttributes({enableCamera: true})
})

实时音视频代码示例

接下的代码中我们来实现一个视频对话功能的小程序，在小程序的入口页面（home页面)中我们为通话的双方用户指定一个房间号，并为当前用户产生一个随机用户ID，然后跳转到通话页面（room页面)进行视频通话。下面的代码是room页面的代码：

示例代码：room.wxml

<view class="template-1v1"><view wx:for="{{playerList}}" wx:key="streamID" wx:if="{{item.src && (item.hasVideo || item.hasAudio)}}" class="view-container player-container {{item.isVisible?'':'none'}}"><live-playerclass="player"id="{{item.streamID}}"data-userid="{{item.userID}}"data-streamid="{{item.streamID}}"data-streamtype="{{item.streamType}}"src= "{{item.src}}"mode= "RTC"autoplay= "{{item.autoplay}}"mute-audio= "{{item.muteAudio}}"mute-video= "{{item.muteVideo}}"orientation= "{{item.orientation}}"object-fit= "{{item.objectFit}}"background-mute= "{{item.enableBackgroundMute}}"min-cache= "{{item.minCache}}"max-cache= "{{item.maxCache}}"sound-mode= "{{item.soundMode}}"enable-recv-message= "{{item.enableRecvMessage}}"auto-pause-if-navigate= "{{item.autoPauseIfNavigate}}"auto-pause-if-open-native="{{item.autoPauseIfOpenNative}}"debug="{{debug}}"bindstatechange="_playerStateChange"bindfullscreenchange="_playerFullscreenChange"bindnetstatus="_playerNetStatus"bindaudiovolumenotify  ="_playerAudioVolumeNotify"/></view><view class="view-container pusher-container {{pusher.isVisible?'':'none'}} {{playerList.length===0? 'fullscreen':''}}"><live-pusherclass="pusher"url="{{pusher.url}}"mode="{{pusher.mode}}"autopush="{{pusher.autopush}}"enable-camera="{{pusher.enableCamera}}"enable-mic="{{pusher.enableMic}}"muted="{{!pusher.enableMic}}"enable-agc="{{pusher.enableAgc}}"enable-ans="{{pusher.enableAns}}"enable-ear-monitor="{{pusher.enableEarMonitor}}"auto-focus="{{pusher.enableAutoFocus}}"zoom="{{pusher.enableZoom}}"min-bitrate="{{pusher.minBitrate}}"max-bitrate="{{pusher.maxBitrate}}"video-width="{{pusher.videoWidth}}"video-height="{{pusher.videoHeight}}"beauty="{{pusher.beautyLevel}}"whiteness="{{pusher.whitenessLevel}}"orientation="{{pusher.videoOrientation}}"aspect="{{pusher.videoAspect}}"device-position="{{pusher.frontCamera}}"remote-mirror="{{pusher.enableRemoteMirror}}"local-mirror="{{pusher.localMirror}}"background-mute="{{pusher.enableBackgroundMute}}"audio-quality="{{pusher.audioQuality}}"audio-volume-type="{{pusher.audioVolumeType}}"audio-reverb-type="{{pusher.audioReverbType}}"waiting-image="{{pusher.waitingImage}}"debug="{{debug}}"bindstatechange="_pusherStateChangeHandler"bindnetstatus="_pusherNetStatusHandler"binderror="_pusherErrorHandler"bindbgmstart="_pusherBGMStartHandler"bindbgmprogress="_pusherBGMProgressHandler"bindbgmcomplete="_pusherBGMCompleteHandler"bindaudiovolumenotify="_pusherAudioVolumeNotify"/><view class="loading" wx:if="{{playerList.length === 0}}"><view class="loading-img"><image src="../../../static/images/loading.png" class="rotate-img"></image></view><view class="loading-text">等待接听中...</view></view></view><view class="handle-btns"><view class="btn-normal" bindtap="_pusherAudioHandler"><image class="btn-image" src="{{pusher.enableMic? '../../../static/images/audio-true.png': '../../../static/images/audio-false.png'}} "></image></view><view class="btn-normal" bindtap="_pusherSwitchCamera" ><image class="btn-image" src="../../../static/images/switch.png"></image></view><view class="btn-normal" bindtap="_setPlayerSoundMode"><image class="btn-image" src="{{playerList[0].soundMode === 'ear' ? '../../../static/images/speaker-false.png': '../../../static/images/speaker-true.png'}} "></image></view></view><view class="bottom-btns"><view class="btn-normal" data-key="beautyLevel" data-value="9|0" data-value-type="number" bindtap="_setPusherBeautyHandle"><image class="btn-image" src="{{pusher.beautyLevel == 9 ? '../../../static/images/beauty-true.png': '../../../static/images/beauty-false.png'}} "></image></view><view class="btn-hangup" bindtap="_hangUp"><image class="btn-image" src="../../../static/images/hangup.png"></image></view></view>
</view>

示例代码：room.js

import TRTC from '../../../static/trtc-wx'
Page({data: {_rtcConfig: {sdkAppID: '', //开通实时音视频服务创建应用后分配的sdkAppIDroomID: '', //房间号可以由您的系统指定userID: '', //用户ID可以由您的系统指定userSig: '', //身份签名，相当于登录密码的作用},roomID: 0,pusher: null,playerList: [],},onLoad(options) {this.TRTC = new TRTC(this)const pusher = this.TRTC.createPusher({beautyLevel: 9})this.setData({_rtcConfig: {userID: options.userID,sdkAppID: options.sdkAppID,userSig: options.userSig,roomID: options.roomID,},pusher: pusher.pusherAttributes})//事件监听this.bindTRTCRoomEvent()//进入房间this.setData({pusher: this.TRTC.enterRoom(this.data._rtcConfig),}, () => {this.TRTC.getPusherInstance().start() })},//设置pusher属性setPusherAttributesHandler(options) {this.setData({pusher: this.TRTC.setPusherAttributes(options),})},//设置某个player属性setPlayerAttributesHandler(player, options) {this.setData({playerList: this.TRTC.setPlayerAttributes(player.streamID, options),})},//事件监听bindTRTCRoomEvent() {const TRTC_EVENT = this.TRTC.EVENTthis.TRTC.on(TRTC_EVENT.ERROR, (event) => {console.log('* room ERROR', event)})//成功进入房间this.TRTC.on(TRTC_EVENT.LOCAL_JOIN, (event) => {console.log('* room LOCAL_JOIN', event)this.setPusherAttributesHandler({ enableCamera: true })this.setPusherAttributesHandler({ enableMic: true })})//成功离开房间this.TRTC.on(TRTC_EVENT.LOCAL_LEAVE, (event) => {console.log('* room LOCAL_LEAVE', event)})//远端用户退出this.TRTC.on(TRTC_EVENT.REMOTE_USER_LEAVE, (event) => {const { playerList } = event.datathis.setData({playerList: playerList})console.log('* room REMOTE_USER_LEAVE', event)})//远端用户推送视频this.TRTC.on(TRTC_EVENT.REMOTE_VIDEO_ADD, (event) => {console.log('* room REMOTE_VIDEO_ADD',  event)const { player } = event.data// 开始播放远端的视频流，默认是不播放的this.setPlayerAttributesHandler(player, { muteVideo: false })})// 远端用户取消推送视频this.TRTC.on(TRTC_EVENT.REMOTE_VIDEO_REMOVE, (event) => {console.log('* room REMOTE_VIDEO_REMOVE', event)const { player } = event.datathis.setPlayerAttributesHandler(player, { muteVideo: true })})// 远端用户推送音频this.TRTC.on(TRTC_EVENT.REMOTE_AUDIO_ADD, (event) => {console.log('* room REMOTE_AUDIO_ADD', event)const { player } = event.datathis.setPlayerAttributesHandler(player, { muteAudio: false })})// 远端用户取消推送音频this.TRTC.on(TRTC_EVENT.REMOTE_AUDIO_REMOVE, (event) => {console.log('* room REMOTE_AUDIO_REMOVE', event)const { player } = event.datathis.setPlayerAttributesHandler(player, { muteAudio: true })})},//挂断退出房间_hangUp() {const result = this.TRTC.exitRoom()this.setData({pusher: result.pusher,playerList: result.playerList,})wx.navigateBack({delta: 1,})},//设置美颜_setPusherBeautyHandle() {const  beautyLevel = this.data.pusher.beautyLevel === 0 ? 9 : 0this.setPusherAttributesHandler({ beautyLevel })},//发布/取消发布Audio_pusherAudioHandler() {if (this.data.pusher.enableMic) {this.setPusherAttributesHandler({ enableMic: false })} else {this.setPusherAttributesHandler({ enableMic: true })}},_pusherSwitchCamera() {const  frontCamera = this.data.pusher.frontCamera === 'front' ? 'back' : 'front'this.TRTC.getPusherInstance().switchCamera(frontCamera)},_setPlayerSoundMode() {if (this.data.playerList.length === 0) {return}const player = this.TRTC.getPlayerList()const soundMode = player[0].soundMode === 'speaker' ? 'ear' : 'speaker'this.setPlayerAttributesHandler(player[0], { soundMode })},_pusherStateChangeHandler(event) {this.TRTC.pusherEventHandler(event)},_pusherNetStatusHandler(event) {this.TRTC.pusherNetStatusHandler(event)},_pusherErrorHandler(event) {this.TRTC.pusherErrorHandler(event)},_pusherBGMStartHandler(event) {this.TRTC.pusherBGMStartHandler(event)},_pusherBGMProgressHandler(event) {this.TRTC.pusherBGMProgressHandler(event)},_pusherBGMCompleteHandler(event) {this.TRTC.pusherBGMCompleteHandler(event)},_pusherAudioVolumeNotify(event) {this.TRTC.pusherAudioVolumeNotify(event)},_playerStateChange(event) {this.TRTC.playerEventHandler(event)},_playerFullscreenChange(event) {this.TRTC.playerFullscreenChange(event)},_playerNetStatus(event) {this.TRTC.playerNetStatus(event)},_playerAudioVolumeNotify(event) {this.TRTC.playerAudioVolumeNotify(event)},
})

生成用户签名

从小程序的入口页面进入room页面需要传递以下参数：

  • sdkAppID：开通实时音视频服务创建应用后分配的sdkAppID
  • roomID：房间号
  • userID：用户ID
  • userSig：身份签名
    UserSig 是腾讯云设计的一种安全保护签名，目的是为了阻止恶意攻击者盗用您的云服务使用权。要使用云服务，您需要在相应 SDK 的初始化或登录函数中提供 SDKAppID，UserID和UserSig 三个关键信息。其中SDKAppID用于标识您的应用，UserID用于标识您的用户，而UserSig 则是基于前两者计算出的安全签名，它由 HMAC SHA256 加密算法计算得出。只要攻击者不能伪造UserSig，就无法盗用您的云服务流量。计算UserSig的服务端代码如下：
func GenUserSig(sdkappid int, key string, userid string, expire int) (string, error) {currTime := time.Now().Unix()var sigDoc map[string]interface{}sigDoc = make(map[string]interface{})sigDoc["TLS.ver"] = "2.0"sigDoc["TLS.identifier"] = identifiersigDoc["TLS.sdkappid"] = sdkappidsigDoc["TLS.expire"] = expiresigDoc["TLS.time"] = currTimesigDoc["TLS.sig"] = _hmacsha256(sdkappid, key, userid, currTime, expire)data, _:= json.Marshal(sigDoc)var b bytes.Bufferw := zlib.NewWriter(&b)w.Write(data)w.Close()return base64urlEncode(b.Bytes()), nil
}
func base64urlEncode(data []byte) string {str := base64.StdEncoding.EncodeToString(data)str = strings.Replace(str, "+", "*", -1)str = strings.Replace(str, "/", "-", -1)str = strings.Replace(str, "=", "_", -1)return str
}
func _hmacsha256(sdkappid int, key string, identifier string, currTime int64, expire int) string {content := "TLS.identifier:" + identifier + "\n"content += "TLS.sdkappid:" + strconv.Itoa(sdkappid) + "\n"content += "TLS.time:" + strconv.FormatInt(currTime, 10) + "\n"content += "TLS.expire:" + strconv.Itoa(expire) + "\n"h := hmac.New(sha256.New, []byte(key))h.Write([]byte(content ))return base64.StdEncoding.EncodeToString(h.Sum(nil))
}

http://chatgpt.dhexx.cn/article/cVyHc4wh.shtml

相关文章

微信小程序添加视频video组件

微信小程序添加视频video组件

小程序视频组件video标签 wxml <View>1.播放网络视频</View> <view ><video style"width: 100%;height400px;margin:1px;" src"http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey30280201010421301f0201690402534804102…
阅读更多...
微信小程序 video 视频 组件

微信小程序 video 视频 组件

完整微信小程序(Java后端) 技术贴目录清单页面&#xff08;必看&#xff09; 视频&#xff08;v2.4.0 起支持同层渲染&#xff09;。相关api&#xff1a;wx.createVideoContext 属性类型默认值必填说明最低版本srcstring是要播放视频的资源地址&#xff0c;支持网络路径、本地…
阅读更多...
微信小程序开发之——Video

微信小程序开发之——Video

视频列表&#xff0c;每次加载很慢&#xff0c;解决小程序使用video组件&#xff0c;播放视频加载很慢&#xff0c;要等数十秒甚至更久才加载出来 解决每次同一时间只能播放一个视频 js: wxml片段: <view wx:for"{{informList}}" wx:for-item"item" w…
阅读更多...
微信小程序视频说明

微信小程序视频说明

步骤&#xff1a; 1. https://www.qiniu.com/ &#xff0c;登录并且注册账号 2. 找到 对象储存 &#xff0c;点击立即添加 3.新建存储空间 4.点击创建好的存储空间。找到内容管理。点击文件上传 5.上传成功后&#xff0c;复制文件外链 6.粘贴到后台视频播放地址里边
阅读更多...
微信小程序录制视频功能实现

微信小程序录制视频功能实现

背景&#xff1a; 之前项目中有个需求&#xff0c;需要在pc端的web页面做一套业务的开户流程&#xff0c;其中在开户流程中需要法人上传本人的开户视频&#xff08;需要支持扫二维码在手机上录制视频上传&#xff09;。pc端上传的功能比较好实现&#xff0c;但是扫二维码在手机…
阅读更多...
微信小程序学习——视频播放小程序

微信小程序学习——视频播放小程序

一、视图设计 &#xff08;一&#xff09;导航栏设计 # app.json——导航栏设置 {"pages":["pages/index/index"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#000080&qu…
阅读更多...
小程序视频（video）播放不了

小程序视频（video）播放不了

1、原因&#xff1a;URl加密了 解决&#xff1a; 2、CSS层级遮挡&#xff0c;导致无法点击问题解决 因层级覆盖、定位等&#xff0c;导致某些地方点击不生效&#xff0c;给遮挡元素设置pointer-events: none即可 若遮挡元素这层有点击事件等&#xff0c;需要另给操作区域设置…
阅读更多...
教你下载微信小程序里的视频

教你下载微信小程序里的视频

目录 利用 Fiddler (http抓包工具)IDM 油猴脚本下载 利用 Fiddler (http抓包工具) 在电脑上打开了小程序的视频&#xff0c;但是我们现在还是不能获取到视频的url地址&#xff0c;这里就需要用到我们的fiddler工具了&#xff08;Fiddler是一个http协议调试代理工具&#xff0c…
阅读更多...
小程序中的视频下载

小程序中的视频下载

一个朋友问我他看到小程序中有一个视频&#xff0c;但是他不知道如何下载下来&#xff0c;我在手机上面打开想直接下载发现还真没有可以直接下载的按钮&#xff0c;然后研究得出大概思路如下&#xff0c;在电脑中打开小程序&#xff0c;然后使用wireshark转包工具抓取数据分析获…
阅读更多...
微信小程序实现视频功能（一）：视频上传

微信小程序实现视频功能（一）：视频上传

微信小程序开发实现视频的上传&#xff08;官方提供了API&#xff0c;基本直接调用就可以了&#xff09; 一、效果图&#xff1a; 二、代码实现 1. video.wxml <!--pages/video/video.wxml--> <view class"main"><view class"playerInfo"…
阅读更多...
微信小程序视频＋微信视频号视频下载教程

微信小程序视频＋微信视频号视频下载教程

之前「随书光盘」那期文章说了要出一期文章来教下「微信小程序视频」怎么下载 阿虚小小研究了一下&#xff0c;今天就来分享一下教程 同时这篇文章也会顺便教下微信「视频号」的视频怎么下载 ▍1 微信小程序视频怎么下载&#xff1f; 以下要说的是真限制在微信小程序内观看的…
阅读更多...
下载微信小程序中的视频

下载微信小程序中的视频

工具准备&#xff1a; Fiddler 我这里用的5.0的版本。&#xff08;这个用来抓取视频下载地址&#xff09; Internet Download Manager&#xff08;idm&#xff09;版本6.37&#xff08;这个用来下载视频&#xff09; 步骤&#xff1a; 打开Fiddler如下图配置后抓包 2.登录PC版微…
阅读更多...
微信小程序——video视频播放

微信小程序——video视频播放

1、功能介绍 可以实现视频的播放暂停&#xff0c;发送弹幕&#xff0c;获取视频所处位置等。 2、video组件 2.1、用处 video组件常用于视频的播放&#xff0c;默认宽度为300px&#xff0c;高度为225px。 2.2、属性 属性说明src视频的资源地址loop是否循环播放&#xff0c;…
阅读更多...
视频播放微信小程序

视频播放微信小程序

2022年夏季《移动软件开发》实验报告 一、实验目标 1、掌握视频列表的切换方法&#xff1b;2、掌握视频自动播放方法&#xff1b;3、掌握视频随机颜色弹幕效果。 二、实验步骤 列出实验的关键步骤、代码解析、截图。 1、创建项目 填好项目名称、目录、AppID等信息后&…
阅读更多...
微信小程序视频基本操作

微信小程序视频基本操作

微信小程序视频基本操作 1、视频1.1 wx.createVideoContext(string id,Object this)接口1.1.2 VideoContext对象常用函数1.1.3 小案例 1.2 wx.chooseVideo()接口object.success 回调函数参数Object res 示例代码 1.2.1 小案例 1.3 wx.saveVideoToPhotosAlbum(Object object)接口…
阅读更多...
【微信小程序】视频播放小程序

【微信小程序】视频播放小程序

课程&#xff1f;中国海洋大学22夏《移动软件开发》实验名称实验3&#xff1a;视频播放小程序 一、实验目标 1、掌握视频列表的切换方法&#xff1b; 2、掌握视频自动播放方法&#xff1b; 3、掌握视频随机颜色弹幕效果。 二、实验步骤 一、项目创建 二、页面配置 创建页面…
阅读更多...
微信小程序如何使用视频组件

微信小程序如何使用视频组件

小程序中可以使用视频组件来播放自己想要展示的视频&#xff0c;具体步骤如下 一、添加视频组件 1、点击“店铺”——“装修店铺”——“编辑”&#xff0c;进入小程序页面编辑。 2、点击“组件库”——“视频”&#xff0c;页面会添加视频组件&#xff0c;点击视频组件的“编…
阅读更多...
PHP实现页面静态化、纯静态化及伪静态化

PHP实现页面静态化、纯静态化及伪静态化

概念 php静态化分为&#xff1a;纯静态化 和 伪静态化&#xff1b; 纯静态化又分为&#xff1a;局部静态化 和 完全静态化 纯静态化&#xff1a;是把PHP生成的动态页面保存成静态的html文件&#xff0c;用户访问该静态页面&#xff0c;而不是用户每一次访问都重新生成一张相…
阅读更多...
SpringBoot整合Thymleaf实现页面静态化

SpringBoot整合Thymleaf实现页面静态化

文章整理题材来源于传智播客乐优商城项目实战&#xff01; 1. 问题需求分析 在做乐优商城时&#xff0c;页面是通过Thymeleaf模板引擎渲染后返回到客户端。当商品详情页数据渲染时&#xff0c;在后台需要大量的数据查询&#xff0c;而后渲染得到HTML页面。在用户访问量大的情况…
阅读更多...
网站页面静态化（二）thymeleaf生成

网站页面静态化（二）thymeleaf生成

今年是农历大年初三&#xff0c;在这里首先给各位朋友拜个年&#xff0c;祝大家新年快乐&#xff0c;虎年大吉大利&#xff0c;事业蒸蒸日上。过年无事&#xff0c;把页面静态化技术整理整理。本文将以thymeleaf为例子&#xff0c;说明在springboot当中&#xff0c;如何基于thy…
阅读更多...
推荐文章

Copyright @ 2022~2023