混合开发短视频播放-dsBridge技术框架

最新推荐文章于 2025-11-01 22:13:17 发布

原创

最新推荐文章于 2025-11-01 22:13:17 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#混合开发 #Android

基本介绍：

混合跨平台技术框架有多种，如web开发、Hybrid开发、React Native、Flutter，此处使用Hybrid实现web与原生的混合开发。

原生与web之间需要搭建通道，才能进行通信，此处用到dsBridge框架实现两者的数据通信，以短视频播放为示例讲解混合开发Hybrid的运用。

慕课网学习视屏地址：https://www.imooc.com/video/22050 ---- 我也是看视屏学习的，但没有源码

dsBridge的使用：

先学习dsBridge的基本使用，实现两者的通信是本次案例的重点。

两端的官方使用文档地址中，详细讲述了dsBridge的集成与基本使用。

dsBridge-android端官方使用文档地址：https://github.com/wendux/DSBridge-Android/blob/master/readme-chs.md

dsBridge-IOS端官方使用文档地址：https://github.com/wendux/DSBridge-IOS

一、dsBridge的集成

① 本地依赖

将文件路径为 https://github.com/wendux/DSBridge-Android/tree/master/dsbridge 下载出来，去掉npm，作为module引入项目中。（npm文件夹中放的事dsBridge.js）

② 仓库依赖

添加 JitPack repository 到gradle脚本中

allprojects {

  repositories {

   ...

   maven { url 'https://jitpack.io' }

  }

}

dependencies {

    //compile 'com.github.wendux:DSBridge-Android:3.0-SNAPSHOT'

    //support the x5 browser core of tencent

    //compile 'com.github.wendux:DSBridge-Android:x5-3.0-SNAPSHOT'

}

短视频播放案例代码：

目录结构：

一、H5页面

<!DOCTYPE html>
<html>
<!--
简体中文页面：html lang=zh-cmn-Hans
繁体中文页面：html lang=zh-cmn-Hant
英语页面：html lang=en -->
<head lang="zh-cmn-Hans">
    <!-- 兼容搜素引擎 webkit -->
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome">
    <!--
    width:可视区域的宽度，值可为数字或关键词device-width
     height:同width
     intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
     maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，
     maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
     user-scalable:是否可对页面进行缩放，no 禁止缩放 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="dsbridge.js"></script>
</head>
<style>
		*{padding 0; margin:0}
		.poster{
			position : relative;
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			-webkit-box-align: center;
			-webkit-align-items: center;
			align-