WebView_HTML5:使用webview和html5视频资源-CSDN文库

共91个文件

png：39个

class：13个

xml：11个

需积分: 5 103 浏览量 2021-05-05 23:09:44 上传评论收藏 1.5MB ZIP 举报

在Android开发中，`WebView` 是一个非常重要的组件，它允许开发者在应用程序内嵌入网页内容，实现与网页的交互。HTML5 是一种强大的网页开发标准，其中包含了丰富的媒体元素，如视频播放功能。本篇文章将详细介绍如何在Android的`WebView`中利用HTML5的视频元素来实现全屏视频播放。我们需要在Android项目中添加`WebView`支持。在布局文件（如 `activity_main.xml`）中，添加`WebView`组件： ```xml <WebView android:id="@+id/webView" android:layout_width="match_parent" android:layout_height="match_parent" /> ``` 然后，在对应的Activity或Fragment中初始化`WebView`，并加载包含HTML5视频的网页。这里我们假设有一个名为 `video.html` 的HTML文件，存储在应用的 `assets` 目录下： ```java WebView webView = findViewById(R.id.webView); webView.getSettings().setJavaScriptEnabled(true); // 启用JavaScript webView.loadUrl("file:///android_asset/video.html"); // 加载本地HTML文件 ``` 在`video.html`文件中，我们可以使用HTML5的 `<video>` 标签来插入视频，并设置相关属性，例如源文件、控制条、宽高等： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <video id="myVideo" width="100%" height="auto" controls> <source src="video.mp4" type="video/mp4">  Your browser does not support the video tag. </video> <script> var myVideo = document.getElementById("myVideo"); myVideo.addEventListener("click", function() { if (myVideo.requestFullscreen) { // 兼容不同浏览器的全屏API myVideo.requestFullscreen(); } else if (myVideo.webkitRequestFullScreen) { myVideo.webkitRequestFullScreen(); } else if (myVideo.msRequestFullscreen) { myVideo.msRequestFullscreen(); } }); </script> </body> </html> ``` 这段代码中，`<video>` 标签定义了一个视频播放器，`src` 属性指向视频文件 `video.mp4`，`controls` 属性则显示播放控制条。同时，我们通过JavaScript监听视频元素的点击事件，当用户点击视频时，调用全屏API使视频进入全屏模式。需要注意的是，全屏API在不同的浏览器和设备上可能略有不同，因此我们使用条件语句来兼容各种情况。`requestFullscreen` 是W3C标准，而 `webkitRequestFullScreen` 和 `msRequestFullscreen` 分别是Webkit和IE的私有实现。为了确保视频文件能在`WebView`中正确播放，你需要将视频文件（如 `video.mp4`）放在项目的 `assets` 目录下。在加载HTML文件时，`WebView`会自动从该目录查找资源。总结来说，要实现在Android的`WebView`中使用HTML5视频并支持全屏播放，你需要完成以下步骤： 1. 在布局文件中添加`WebView`组件。 2. 初始化`WebView`，启用JavaScript并加载包含HTML5视频的本地文件。 3. 在HTML文件中使用`<video>`标签插入视频，添加控制条和事件监听器以实现全屏功能。 4. 确保视频文件位于`assets`目录下，以便`WebView`能正确加载。通过这种方式，你可以在Android应用中提供一个具有全屏功能的HTML5视频播放体验。同时，结合Java和HTML5的特性，还可以实现更多交互和自定义功能，增强用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

WebView_HTML5-master.zip （91个子文件）

WebView_HTML5-master

bin

classes.dex 387KB

Webviewtest.apk 245KB

WebView_HTML5.apk 245KB

res

drawable-ldpi

ic_launcher.png 2KB

drawable-hdpi

ic_launcher.png 4KB

ic_action_search.png 409B

drawable-xhdpi

ic_launcher.png 5KB

ic_action_search.png 491B

crunch

drawable-ldpi

ic_launcher.png 2KB

drawable-hdpi

ic_launcher.png 4KB

ic_action_search.png 409B

drawable-xhdpi

ic_launcher.png 5KB

ic_action_search.png 491B

drawable-mdpi

ic_launcher.png 3KB

ic_action_search.png 311B

drawable-mdpi

ic_launcher.png 3KB

ic_action_search.png 311B

jarlist.cache 120B

dexedLibs

android-support-v4-0aea82749981e61574aa0665ea442003.jar 129KB

android-support-v4-4e2ba7b2588f663de28f4cf1129a40ee.jar 129KB

android-support-v4-62673dd35f94ecb341d79ffbd467f76f.jar 129KB

classes

com

webview

MainActivity.class 3KB

MainActivity$2.class 3KB

MainActivity$1.class 1KB

samsung

webviewtest

BuildConfig.class 361B

R$layout.class 427B

R$id.class 481B

R$drawable.class 471B

R$dimen.class 499B

R$attr.class 364B

R$menu.class 421B

R.class 753B

R$string.class 537B

R$style.class 419B

resources.ap_ 109KB

AndroidManifest.xml 1KB

res

drawable-ldpi

ic_launcher.png 1KB

values-v11

styles.xml 94B

activity_main.xml 240B

values-v14

styles.xml 89B

drawable-hdpi

ic_launcher.png 3KB

ic_action_search.png 3KB

drawable-xhdpi

ic_launcher.png 4KB

ic_action_search.png 3KB

values

strings.xml 246B

styles.xml 89B

dimens.xml 166B

drawable-mdpi

ic_launcher.png 2KB

ic_action_search.png 3KB

values-large

dimens.xml 167B

layout

activity_main.xml 432B

proguard-project.txt 781B

ic_launcher-web.png 36KB

assets

css

ui-darkness

images

ui-icons_222222_256x240.png 4KB

ui-icons_cccccc_256x240.png 4KB

ui-bg_inset-soft_25_000000_1x100.png 98B

ui-bg_inset-soft_30_f58400_1x100.png 117B

ui-bg_flat_50_5c5c5c_40x100.png 180B

ui-icons_a83300_256x240.png 4KB

ui-bg_glass_40_0078a3_1x400.png 135B

ui-bg_glass_20_555555_1x400.png 115B

ui-bg_gloss-wave_25_333333_500x100.png 2KB

ui-bg_flat_30_cccccc_40x100.png 180B

ui-bg_highlight-soft_80_eeeeee_1x100.png 95B

ui-bg_glass_40_ffc73d_1x400.png 167B

ui-icons_ffffff_256x240.png 4KB

ui-icons_4b8e0b_256x240.png 5KB

jquery-ui-1.8.23.custom.css 20KB

images

android.png 2KB

009.gif 4KB

jquery.confirm

header_bg.jpg 604B

ie.png 121B

buttons.png 2KB

body_bg.jpg 602B

jquery.confirm.css 2KB

main.css 32B

index.html 762B

main.js 2KB

.project 388B

lib

jquery-1.7.2.min.js 93KB

jquery-ui-1.8.23.custom.min.js 29KB

jquery.confirm.js 2KB

jquery.base64.min.js 5KB

gen

com

samsung

webviewtest

BuildConfig.java 168B

R.java 1KB

src

com

webview

MainActivity.java 5KB

project.properties 563B

README.md 55B

AndroidManifest.xml 1KB

libs

android-support-v4.jar 330KB

lint.xml 204B

评论收藏

内容反馈

kolten

粉丝: 51
资源: 4558

WebView_HTML5:使用webview和html5视频

webview支持html5视频播放功能

浏览器&WebView&JS&HTML5 webview支持html5视频播放实例(程序源码).rar

源码 浏览器&WebView&JS&HTML5 webview支持html5视频播放实例.zip

html5.zip_WebView_android_webview与html5

ubuntu-html5-webview-template:用于从任何 html5 应用程序制作点击包的模板，使用 QML WebView 包装器以获得更大的灵活性

webview_flutter_plus.7z

webview_deno::globe_with_meridians:用于Webview的Deno绑定，这是一个用于创建基于Web的桌面GUI的小型库

webview_浏览器_qt浏览器_QT_WebView_

Android-WebSocket-WebView_DEMO_websocket_androidwebview_

X5WebViewDemo_X5webdemo_x5测试网页_X5webviewdemo_DEMO_X5webview官网_

Android如何让WebView中的HTML5页面实现视频全屏播放

源码 浏览器&WebView&JS&HTML5 webview重载使用.zip

webview_flutter_lecle:Flutter应用程序的WebView插件已修复错误，无法在origianl插件中使用相机和麦克风

swift-webview-isolated:迷你网络浏览器。 为 Mac OS X 使用隔离的 WebView 的示例

WebView_SD1340:一个适用于android设备的简单webview webapp，用于提供本地webappwebsite

WebView_jsp页面跳转到原生Activity

ios webView获取html标签

android demo，webview_js(webview的js方法调用java方法)。

Android 中的 WebView实现Html5标签使用

android-kotlin-webview：使用基本的Android Studio工具将Java WebView简单地从Java转换为Kotlin

swift-webview-sample:快速在 Mac OS X 上使用 WebView

react-native-android-fullscreen-webview:在Android上支持全屏视频的React Native WebView组件

SmartWebView-Pro：Smart WebView Pro是使用chrome webview的高级包装程序版本

源码 浏览器&WebView&JS&HTML5 使用html5得到手机设备信息的.zip

android system webview_V67

ios关于WebView的示例

webview支持html5视频播放实例.zip

android webview

BTAndroidWebViewSelection.rar_WebView_android_android webview

最新资源

源码浏览器&WebView&JS&HTML5 webview支持html5视频播放实例.zip

源码浏览器&WebView&JS&HTML5 webview重载使用.zip

swift-webview-isolated:迷你网络浏览器。为 Mac OS X 使用隔离的 WebView 的示例

源码浏览器&WebView&JS&HTML5 使用html5得到手机设备信息的.zip