All Projects → VenusCao → x5_webview_flutter

VenusCao / x5_webview_flutter

Licence: Apache-2.0 License
一个基于腾讯x5引擎的webview flutter插件,简化集成,一行代码打开视频播放,暂时只支持android使用

Programming Languages

dart
5743 projects
kotlin
9241 projects
ruby
36898 projects - #4 most used programming language
HTML
75241 projects
swift
15916 projects
objective c
16641 projects - #2 most used programming language

Projects that are alternatives of or similar to x5 webview flutter

Youtube player flutter
Flutter plugin for playing or streaming YouTube videos inline using the official iFrame Player API. Supports both Android and iOS platforms.
Stars: ✭ 366 (+306.67%)
Mutual labels:  webview, video-player, flutter-plugin
Android-VimeoPlayer
Unofficial Vimeo video player library for Android.
Stars: ✭ 46 (-48.89%)
Mutual labels:  webview, video-player
Flutter inappwebview
A Flutter plugin that allows you to add an inline webview, to use a headless webview, and to open an in-app browser window.
Stars: ✭ 1,259 (+1298.89%)
Mutual labels:  webview, flutter-plugin
Drm wv fp player
Few of the resources from flutter plugin video_player
Stars: ✭ 19 (-78.89%)
Mutual labels:  video-player, flutter-plugin
Web Vuw
A Web View for flutter
Stars: ✭ 40 (-55.56%)
Mutual labels:  webview, flutter-plugin
X5Bridge
Three party libraries of Tencent x5webview and JS interaction
Stars: ✭ 17 (-81.11%)
Mutual labels:  webview, x5
cordova-plugin-x5-tbs
Use Tencent Browser Service(TBS) instead of System WebView for Cordova App
Stars: ✭ 65 (-27.78%)
Mutual labels:  webview, tbs
WeBer
Android x5 内核 WebView 的 Helper 完美兼容 AndroidX 和 android 库,欢迎使用~~~
Stars: ✭ 20 (-77.78%)
Mutual labels:  webview, x5
os-fileup
Helper app to understand how to upload files and do basic image/video processing in hybrid android apps.
Stars: ✭ 207 (+130%)
Mutual labels:  webview
GPS-Video-Logger
Android App to record video and track GPS data simultaneously. GPS Logger with Video. GPS and video recording.
Stars: ✭ 17 (-81.11%)
Mutual labels:  video-player
webviewhs
🌐 A Haskell binding to the webview library created by Serge Zaitsev.
Stars: ✭ 109 (+21.11%)
Mutual labels:  webview
nativeweb
Build your Own Plugin using (PlatformViews) Demo for Flutter Live 2018 Extended Event - Hyderabad
Stars: ✭ 26 (-71.11%)
Mutual labels:  flutter-plugin
vue3-video-play
适用于 Vue3 的 hls.js 播放器组件,配置丰富,界面还算好看
Stars: ✭ 108 (+20%)
Mutual labels:  video-player
flutter video list sample
Flutter workout to play video list
Stars: ✭ 30 (-66.67%)
Mutual labels:  video-player
floating-video-player-android
Floating VideoPlayer sample project with plugin
Stars: ✭ 17 (-81.11%)
Mutual labels:  video-player
sammy-android
Sammy, an advanced video player that enables understanding of videos for the visually-disabled and quicker navigation for everyone
Stars: ✭ 13 (-85.56%)
Mutual labels:  video-player
webview
Nim bindings for https://github.com/zserge/webview
Stars: ✭ 91 (+1.11%)
Mutual labels:  webview
qrcode
A flutter plugin for scanning QR codes. Use AVCaptureSession in iOS and zxing in Android.
Stars: ✭ 69 (-23.33%)
Mutual labels:  flutter-plugin
Super-Stitch
一款视频超级拼接软件
Stars: ✭ 28 (-68.89%)
Mutual labels:  video-player
Flutter-Apps
🌀 This is mainly focus on a complete application for production
Stars: ✭ 18 (-80%)
Mutual labels:  flutter-plugin

x5_webview pub package

一个基于腾讯x5引擎的webview的flutter插件,暂时只支持android使用 提示:之前内嵌webview出现的一系列问题得到解决,请更新到最新版试用,谢谢支持。

x5内核介绍

x5内核,腾讯为改善移动端web体验的一种内核架构。加载更快,更省流量,视频播放优化,文件助手等等

快速集成

pub package

pub地址

pubspec.yaml文件添加

dependencies:
  x5_webview: ^x.x.x //最新版本见上方

初始化x5。(安卓6.0+需在init之前请求动态权限,可以使用permission_handler,详情见example/lib/main.dart)

//请求权限
Map<Permission, PermissionStatus> statuses = await [
      Permission.phone,
      Permission.storage,
    ].request();
//判断权限
if (!(statuses[Permission.phone].isGranted &&
statuses[Permission.storage].isGranted)) {
    print("权限被拒绝");
    return;
}

var isOk = await X5Sdk.init();
print(isOk ? "X5内核成功加载" : "X5内核加载失败");

如果你只是想要简单的展示web页面,可使用以下代码直接打开一个webActivity, 性能更佳(推荐使用,视频播放也可以这个api)

X5Sdk.openWebActivity("https://www.baidu.com",title: "web页面");

使用TBSPlayer直接全屏播放视频(screenMode自行测试,103横屏 104竖屏,官方默认使用102第一次点击全屏无反应)

    var isOk = await X5Sdk.openVideo(
    "https://ifeng.com-l-ifeng.com/20180528/7391_46b6cf3b/index.m3u8",screenMode: 102);

打开本地文件 接入TBS可支持打开文件格式:doc、docx、ppt、pptx、xls、xlsx、pdf、txt、epub 调用QQ浏览器可打开:rar(包含加密格式)、zip(包含加密格式)、tar、bz2、gz、7z(包含加密格式)、 doc、docx、ppt、pptx、xls、xlsx、txt、pdf、epub、chm、html/htm、xml、mht、url、ini、log、 bat、php、js、lrc、jpg、jpeg、png、gif、bmp、tiff 、webp、mp3、m4a、aac、amr、wav、ogg、mid、 ra、wma、mpga、ape、flac

var errorMsg = await X5Sdk.openFile("/sdcard/download/FileList.xlsx");
print(errorMsg);

使用内嵌webview

return Scaffold(
      appBar: AppBar(
        title: Text("X5WebView示例"),
      ),
      body: defaultTargetPlatform == TargetPlatform.android
          ? X5WebView(
              url: "http://debugtbs.qq.com",
              javaScriptEnabled: true,
              header: {"TestHeader": "测试"},
              userAgentString: "my_ua",
              //Url拦截,传null不会拦截会自动跳转
              onUrlLoading: (willLoadUrl) {
                _controller.loadUrl(willLoadUrl);
              }
              onWebViewCreated: (control) {
                _controller = control;
              },
              onPageFinished: () async {
                var url = await _controller.currentUrl();
                print(url);
                var body = await _controller
                    .evaluateJavascript('document.body.innerHTML');
                print(body);
              },
            )
          :
          //可替换为其他已实现ios webview,此处使用webview_flutter
          WebView(
              initialUrl: "https://www.baidu.com",
              javascriptMode: JavascriptMode.unrestricted,
              onWebViewCreated: (control) {
                _otherController = control;
                var body = _otherController
                    .evaluateJavascript('document.body.innerHTML');
                print(body);
              },
            ),
    );

##内嵌webview js与flutter互调

flutter调用js

var body = await _controller.evaluateJavascript("document.body.innerHTML");

js调用flutter

  • flutter代码
     X5WebView(
        ...
        javascriptChannels: JavascriptChannels(
            ["X5Web", "Toast"], (name, data) {
          switch (name) {
            ...
          }
        }))
  • js代码
X5Web.postMessage("XXX")
Toast.postMessage("YYY")

打开本地html文件(使用assets文件,内嵌webview同理)

var fileS = await rootBundle.loadString("assets/index.html");
var url = Uri.dataFromString(fileS,
                          mimeType: 'text/html',
                          encoding: Encoding.getByName('utf-8'))
                      .toString();
X5Sdk.openWebActivity(url, title: "本地html示例");

注意事项

  • 该插件暂时只支持Android手机,IOS会使用无效。ios可使用webview_flutter或其他已实现IOS WXWebView插件

  • 一般手机安装了QQ,微信,QQ浏览器等软件,手机里自动会有X5内核,如果没有X5内核会在wifi下自动下载,X5内核没有加载成功会自动使用系统内核官网说明。详细配置可用手机打开以下链接查看X5内核的详情

    http://debugtbs.qq.com
    
  • 请使用真机测试,模拟器可能不能正常显示

  • 如果测试正常,打包后不能加载,可以尝试使用android studio打开android目录直接打包apk。或者使用以下命令行打包

flutter build apk --target-platform android-arm --no-shrink
  • android9.0版本webview联不了网在manifest添加

    <application
        ...
        android:usesCleartextTraffic="true">
    </application>
    
  • android7.0版本打开文件需要在manifest的application内添加(xml文件已在插件内,无需自己创建)

          <!--        不使用androidx 请用android:name="android.support.v4.content.FileProvider"-->    
        <provider
            android:name="androidx.core.content.FileProvider"
            android:authorities="${applicationId}"
            android:exported="false"
            android:grantUriPermissions="true">
            <meta-data
                android:name="android.support.FILE_PROVIDER_PATHS"
                android:resource="@xml/x5webview_file_paths" />
        </provider>  
    
  • X5Sdk.openWebActivity actionbar颜色自定义

    //1.
    implementation "androidx.appcompat:appcompat:1.1.0"
    
    //2.
      <style name="AppTheme" parent="ThemeOverlay.AppCompat.Dark">
          <!-- Customize your theme here. -->
          <item name="colorPrimary">#2196F3</item>
          <item name="colorPrimaryDark">#1976D2</item>
          <item name="colorAccent">#FF4081</item>
          <item name="windowNoTitle">false</item>
          <item name="windowActionBar">true</item>
      </style>
    
    //3.
    <application
          ...
          android:theme="@style/AppTheme">
    
    
  • 有比较急的问题可以加我QQ:793710663

示例程序下载(密码:123456)

apk下载

二维码

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].