Flutter JavaScript执行插件player

Flutter JavaScript执行插件Player JS的使用

简介

PlayerJS 是一个专门为Web开发定制的视频播放器，基于JavaScript构建。这个包允许你在Flutter项目中通过Dart代码将它作为一个Widget使用，适用于Web应用。

PlayerJS

安装步骤

创建自己的PlayerJS播放器
- 你需要在 PlayerJS官网创建你自己的播放器。
- 按照官网提供的说明进行配置和生成播放器。
- 完成后，确保下载生成的播放器文件。
将播放器文件放入Flutter项目的Web目录
- 将下载的播放器文件放到Flutter项目的 web 目录下。
在 index.html 中引入播放器
- 打开 web/index.html 文件，在 <body> 标签内添加以下代码，以引入播放器：
```
<script src="path_to_your_player_js_file.js"></script>
```
安装Flutter插件
- 在 pubspec.yaml 文件中添加 player_js 依赖：
```
dependencies:
  player_js: ^latest_version
```
完成以上步骤后，你可以开始使用该插件了。

功能特性

支持直播流
性能优越，加载速度快
支持高质量编解码（H.264 + AAC）
支持Chromecast投屏
集成Google Analytics
支持广告投放
独立的Iframe模式

支持的格式

在构建播放器时，需要启用所有功能以支持以下格式：

名称	扩展名
MPEG-4	.MP4
Matroska	.MKV
Audio Video Interleave	.AVI
WebM	.WEBM
HLS	.M3U8
MPEG-DASH	.MPD

示例代码

以下是一个完整的示例代码，展示了如何在Flutter Web应用中使用 player_js 插件：

import 'package:flutter/material.dart';
import 'package:player_js/player_js.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Player JS Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: PlayerScreen(),
    );
  }
}

class PlayerScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Player JS Demo'),
      ),
      body: Center(
        child: Player(
          videoUrl: 'http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_30fps_normal.mp4',
          subtitles: {
            'ar': 'https://example/arabic.srt', // 阿拉伯语字幕
            'en': 'https://example/english.srt'  // 英文字幕
          },
          height: 400, // 播放器高度
          width: 700,  // 播放器宽度
        ),
      ),
    );
  }
}

许可证

Player JS 使用的是 BSD 3-Clause License，具体内容如下：

BSD 3-Clause License

Copyright (c) 2023 Djeddi Yacine
All rights reserved.

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:

1. Redistributions of source code must retain the above copyright notice, this
   list of conditions and the following disclaimer.

2. Redistributions in binary form must reproduce the above copyright notice,
   this list of conditions and the following disclaimer in the documentation
   and/or other materials provided with the distribution.

3. Neither the name of the copyright holder nor the names of its
   contributors may be used to endorse or promote products derived from
   this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

更多关于Flutter JavaScript执行插件player_js的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

phonegap100 1楼•7 天前

更多关于Flutter JavaScript执行插件player_js的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter应用中使用player_js插件来执行JavaScript代码的示例。player_js插件允许你在Flutter应用中嵌入一个WebView，并与之交互执行JavaScript代码。

首先，确保你已经在pubspec.yaml文件中添加了player_js依赖：

dependencies:
  flutter:
    sdk: flutter
  player_js: ^x.y.z  # 请替换为最新的版本号

然后运行flutter pub get来安装依赖。

接下来，创建一个Flutter应用并配置player_js。以下是一个简单的示例，展示如何在Flutter中使用player_js来执行JavaScript代码：

1. 创建Flutter项目结构

假设你的项目结构如下：

my_flutter_app/
├── android/
├── ios/
├── lib/
│   ├── main.dart
│   └── web_view_page.dart
├── pubspec.yaml
└── ...

2. 编写`main.dart`

import 'package:flutter/material.dart';
import 'web_view_page.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter WebView Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: WebViewPage(),
    );
  }
}

3. 编写`web_view_page.dart`

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import 'package:player_js/player_js.dart';

class WebViewPage extends StatefulWidget {
  @override
  _WebViewPageState createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  final flutterWebViewPlugin = FlutterWebviewPlugin();

  @override
  void initState() {
    super.initState();
    // 启动WebView并加载一个网页
    flutterWebViewPlugin.launch(
      url: 'https://www.example.com', // 替换为你想要加载的URL
      withJavascript: true,
      withLocalStorage: true,
      withZoom: true,
    );

    // 监听WebView加载完成事件
    flutterWebViewPlugin.onUrlChanged.listen((String url) {
      print("URL changed: $url");
    });

    // 监听JavaScript执行结果
    flutterWebViewPlugin.onEvalJavascriptComplete.listen((WebViewController controller, Map<String, dynamic> result) {
      print("JavaScript execution result: ${result['result']}");
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter WebView Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                // 执行JavaScript代码
                flutterWebViewPlugin.evalJavascript(
                  source: "document.title;",
                ).then((result) {
                  // 处理执行结果
                  print("Page title: ${result['result']}");
                });
              },
              child: Text('Get Page Title'),
            ),
          ],
        ),
      ),
    );
  }
}

注意事项

权限：确保在AndroidManifest.xml和Info.plist文件中添加了必要的权限和配置，以允许WebView加载网页和执行JavaScript。
错误处理：在实际应用中，建议添加更多的错误处理逻辑，以处理可能的异常情况，如WebView加载失败、JavaScript执行错误等。
插件版本：确保你使用的player_js插件版本与Flutter SDK兼容。如果在使用过程中遇到问题，请检查插件的官方文档和GitHub仓库以获取最新的信息和修复。
依赖冲突：如果项目中已经使用了其他WebView相关的插件，请注意依赖冲突问题，并相应地调整配置。

这个示例展示了如何在Flutter应用中使用player_js插件来加载网页和执行JavaScript代码。你可以根据实际需求进行进一步的修改和扩展。

Flutter JavaScript执行插件player_js的使用