代码拉取完成，页面将自动刷新
本示例介绍如何使用@kit.NetworkKit接口监听手机网络状态，根据不同的网络状态对视频进行播放、暂停处理等操作。
| 视频播放 | 网络设置 |
|---|---|
|
|
使用说明
|entry/src/main/ets
| |---entryablity
| | |---EntryAbility.ts // 程序入口类
| |---pages
| | |---SettingPage.ets // 自动播放设置页面
| | |---VideoPage.ets // 视频播放页面
| |---utils
| | |---EmitterData.ets // emitter数据结构
| | |---Logger.ets // 日志打印
| | |---NetUtils.ets // 网络监听工具类
页面实现
1.1 在VideoPage中添加Video组件，设置在线视频播放
```
Video({
src: "https://v.oh4k.com/muhou/2022/07/20220704-RIUq3Z.mp4",
controller: this.controller
}).height(300)
.width('100%')
.autoPlay(this.autoPlay())
```
1.2 在aboutToAppear方法中添加网络状态监听，并开始监听WI-FI和蜂窝数据的状态。
```
emitter.on(NetUtils.getInstance().getEmitterEvent(), (data: emitter.EventData) => {
if (data) {
this.netObserver(data);
} else {
logger.info("aboutToAppear emitter on error, data is undefined.");
}
});
NetUtils.getInstance().startNetObserve(connection.NetBearType.BEARER_CELLULAR, connection.NetBearType.BEARER_WIFI);
```
1.3 在netObserver方法中，添加不同网络状态的处理。
netObserver(data: emitter.EventData) {
...
let eventName: NetworkEventName = netEventData.eventName ?? -1;
switch (eventName) {
case NetworkEventName.NetAvailable:
if (netEventData.netType === connection.NetBearType.BEARER_WIFI) {
if (this.wifiAutoPlay) {
this.startPlay();
}
}
break;
case NetworkEventName.NetBlock:
break;
case NetworkEventName.NetLost:
if (netEventData.netType === connection.NetBearType.BEARER_WIFI) {
this.wifiInterrupt();
}
break;
case NetworkEventName.NetUnavailable:
if (netEventData.netType === connection.NetBearType.BEARER_WIFI) {
this.wifiInterrupt();
}
break;
case NetworkEventName.WeakNet:
// 如果是弱网环境
if (netEventData.status) {
Prompt.showToast({ message: "当前网络环境较差，视频播放可能出现卡顿" });
}
break;
default:
logger.debug("当前网络状态：" + eventName);
break;
}
}
1.4 在SettingPage中添加Toggle组件，管理自动播放设置。
Toggle({ type: ToggleType.Switch, isOn: this.cellularAutoPlay })
.selectedColor('#007DFF')
.switchPointColor('#FFFFFF')
.onChange((isOn: boolean) => {
logger.info('Component status:' + isOn);
AppStorage.setOrCreate('cellular_auto_play', isOn);
PersistentStorage.persistProp('cellular_auto_play', isOn);
})
.width('10%')
网络状态监听工具类NetUtils实现，通过@kit.NetworkKit接口监听网络状态，然后通过emitter将监听结果传递给页面。
2.1 开启网络监听
public startNetObserve(...netType: connection.NetBearType[]) {
netType.forEach((type: connection.NetBearType) => {
this.networkObserve(type);
if (type === connection.NetBearType.BEARER_WIFI) {
this.wifiStateObserve();
}
})
}
2.2 关闭网络监听
public stopNetObserve(netType: connection.NetBearType) {
this.connectionMap.get(netType).unregister(() => {
logger.info("Success unregister：" + netType.toString());
})
}
2.3 网络状态监听
networkObserve(netType: connection.NetBearType) {
let netConnection: connection.NetConnection = connection.createNetConnection({
netCapabilities: {
bearerTypes: [netType]
}
})
netConnection.register((error: BusinessError) => {
let result = true;
if (error) {
logger.info("NetUtils", "NetType :" + netType + ", network register failed: " + JSON.stringify(error));
result = false;
}
logger.info("NetUtils", "NetType :" + netType + ", network register succeed");
this.postEvent(NetworkEventName.NetObserverRegister, result, netType);
});
netConnection.on('netCapabilitiesChange', (data: connection.NetCapabilityInfo) => {
logger.info("NetUtils", "NetType :" + netType + ", network netCapabilitiesChange: " + JSON.stringify(data));
this.postEvent(NetworkEventName.NetCapabilitiesChange, data, netType);
})
netConnection.on("netAvailable", (data: connection.NetHandle) => {
logger.info("NetUtils", "NetType :" + netType + ", network succeeded to get netAvailable: " + JSON.stringify(data));
// 检查默认数据网络是否被激活，使用同步方式返回接口，如果被激活则返回true，否则返回false。
this.postEvent(NetworkEventName.NetAvailable, connection.hasDefaultNetSync(), netType);
});
// 订阅网络阻塞状态事件，当网络阻塞时，如网络性能下降、数据传输出现延迟等情况时，会触发该事件
netConnection.on('netBlockStatusChange', (data: connection.NetBlockStatusInfo) => {
logger.info("NetUtils", "NetType :" + netType + ", network netBlockStatusChange " + JSON.stringify(data));
this.postEvent(NetworkEventName.NetBlock, data, netType)
});
netConnection.on('netConnectionPropertiesChange', (data: connection.NetConnectionPropertyInfo) => {
logger.info("NetUtils", "NetType :" + netType + ", network netConnectionPropertiesChange " + JSON.stringify(data));
this.postEvent(NetworkEventName.NetConnectionPropertiesChange, data, netType);
});
// 订阅网络丢失事件，当网络严重中断或正常断开时触发该事件
// 网络丢失是指网络严重中断或正常断开事件，当断开Wi-Fi时，是属于正常断开网络连接，会触发netLost事件
netConnection.on('netLost', (data: connection.NetHandle) => {
this.postEvent(NetworkEventName.NetLost, true, netType)
logger.info("NetUtils", "NetType :" + netType + ", Succeeded to get netLost: " + JSON.stringify(data));
});
// 订阅网络不可用事件，当网络不可用时触发该事件
// 网络不可用是指网络不可用事件，当连接的网络不能使用时，会触发netUnavailable事件。
netConnection.on('netUnavailable', () => {
logger.info("NetUtils", "NetType :" + netType + ", Succeeded to get unavailable net event");
this.postEvent(NetworkEventName.NetUnavailable, true, netType);
});
this.connectionMap.set(netType, netConnection);
}
2.4 通过emitter将网络监听状态传递给页面
private postEvent(eventName: NetworkEventName, status: NetworkData, netType?: connection.NetBearType,
priority?: emitter.EventPriority) {
this.emitterEvent.priority = priority;
emitter.emit(this.emitterEvent, {
data: new NetEventData(eventName, status, netType)
})
}
| 权限名 | 权限说明 | 级别 |
|---|---|---|
| ohos.permission.INTERNET | 允许使用Internet网络 | normal |
| ohos.permission.GET_WIFI_INFO | 允许应用获取Wi-Fi信息 | normal |
| ohos.permission.GET_NETWORK_INFO | 允许应用获取数据网络信息 | normal |
本示例需要在有流量卡/Wi-Fi的设备上使用。
本示例仅支持标准系统上运行。
本示例为Stage模型，从API version 12开始支持。SDK版本号：5.0.0.71 Release，镜像版本号：OpenHarmony 5.0.1.107。
本示例需要使用DevEco Studio 5.0.2 Release (Build Version: 5.0.7.200, built on January 23, 2025)编译运行。
如需单独下载本工程，执行如下命令：
git init
git config core.sparsecheckout true
echo code/BasicFeature/Connectivity/NetworkObserver/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
