
- 原 名
- Livescript
- 软件语言
- JavaScript
- 开发商
- Netscape、Mozilla基金会
- 软件名称
- JavaScript
- 更新时间
- 2016年4月 [1]
- 软件版本
- ECMAScript 6 [1]
- 实现功能
- 人机交互
- 软件平台
- Chrome、IE、Safari、Firefox等 [3]
- 语言类型
- 脚本语言
-
Android:你要的WebView与 JS 交互方式 都在这里了
2017-03-22 09:19:45前言 现在很多App里都内置了Web网页(Hybrid App),比如说很多电商平台,淘宝...今天我将全面介绍Android通过WebView与JS交互的全面方式 阅读本文前请先阅读:Android开发:最全面、最易懂的Webview详解 ...前言
- 现在很多App里都内置了Web网页(Hybrid App),比如说很多电商平台,淘宝、京东、聚划算等等,如下图
- 上述功能是由Android的WebView实现的,其中涉及到Android客户端与Web网页交互的实现
- 今天我将全面介绍Android通过WebView与JS交互的全面方式
阅读本文前请先阅读:Android开发:最全面、最易懂的Webview详解
#目录
1. 交互方式总结
Android与JS通过WebView互相调用方法,实际上是:
- Android去调用JS的代码
- JS去调用Android的代码
二者沟通的桥梁是WebView
对于Android调用JS代码的方法有2种:
- 通过
WebView
的loadUrl()
- 通过
WebView
的evaluateJavascript()
对于JS调用Android代码的方法有3种:
- 通过
WebView
的addJavascriptInterface()
进行对象映射 - 通过
WebViewClient
的shouldOverrideUrlLoading ()
方法回调拦截 url - 通过
WebChromeClient
的onJsAlert()
、onJsConfirm()
、onJsPrompt()
方法回调拦截JS对话框alert()
、confirm()
、prompt()
消息
2. 具体分析
2.1 Android通过WebView调用 JS 代码
对于Android调用JS代码的方法有2种:
- 通过
WebView
的loadUrl()
- 通过
WebView
的evaluateJavascript()
方式1:通过
WebView
的loadUrl()
- 实例介绍:点击Android按钮,即调用WebView JS(文本名为
javascript
)中callJS() - 具体使用:
步骤1:将需要调用的JS代码以
.html
格式放到src/main/assets文件夹里- 为了方便展示,本文是采用Andorid调用本地JS代码说明;
- 实际情况时,Android更多的是调用远程JS代码,即将加载的JS代码路径改成url即可
需要加载JS代码:javascript.html
// 文本名:javascript <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Carson_Ho</title> // JS代码 <script> // Android需要调用的方法 function callJS(){ alert("Android调用了JS的callJS方法"); } </script> </head> </html>
步骤2:在Android里通过WebView设置调用JS代码
Android代码:MainActivity.java
注释已经非常清楚
public class MainActivity extends AppCompatActivity { WebView mWebView; Button button; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mWebView =(WebView) findViewById(R.id.webview); WebSettings webSettings = mWebView.getSettings(); // 设置与Js交互的权限 webSettings.setJavaScriptEnabled(true); // 设置允许JS弹窗 webSettings.setJavaScriptCanOpenWindowsAutomatically(true); // 先载入JS代码 // 格式规定为:file:///android_asset/文件名.html mWebView.loadUrl("file:///android_asset/javascript.html"); button = (Button) findViewById(R.id.button); button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // 通过Handler发送消息 mWebView.post(new Runnable() { @Override public void run() { // 注意调用的JS方法名要对应上 // 调用javascript的callJS()方法 mWebView.loadUrl("javascript:callJS()"); } }); } }); // 由于设置了弹窗检验调用结果,所以需要支持js对话框 // webview只是载体,内容的渲染需要使用webviewChromClient类去实现 // 通过设置WebChromeClient对象处理JavaScript的对话框 //设置响应js 的Alert()函数 mWebView.setWebChromeClient(new WebChromeClient() { @Override public boolean onJsAlert(WebView view, String url, String message, final JsResult result) { AlertDialog.Builder b = new AlertDialog.Builder(MainActivity.this); b.setTitle("Alert"); b.setMessage(message); b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { result.confirm(); } }); b.setCancelable(false); b.create().show(); return true; } }); } }
特别注意:JS代码调用一定要在
onPageFinished()
回调之后才能调用,否则不会调用。onPageFinished()
属于WebViewClient类的方法,主要在页面加载结束时调用方式2:通过
WebView
的evaluateJavascript()
- 优点:该方法比第一种方法效率更高、使用更简洁。
- 因为该方法的执行不会使页面刷新,而第一种方法(loadUrl )的执行则会。
- Android 4.4 后才可使用
- 具体使用
// 只需要将第一种方法的loadUrl()换成下面该方法即可 mWebView.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() { @Override public void onReceiveValue(String value) { //此处为 js 返回的结果 } }); }
2.1.2 方法对比
2.1.3 使用建议
两种方法混合使用,即Android 4.4以下使用方法1,Android 4.4以上方法2
// Android版本变量 final int version = Build.VERSION.SDK_INT; // 因为该方法在 Android 4.4 版本才可使用,所以使用时需进行版本判断 if (version < 18) { mWebView.loadUrl("javascript:callJS()"); } else { mWebView.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() { @Override public void onReceiveValue(String value) { //此处为 js 返回的结果 } }); }
2.2 JS通过WebView调用 Android 代码
对于JS调用Android代码的方法有3种:
- 通过
WebView
的addJavascriptInterface()
进行对象映射 - 通过
WebViewClient
的shouldOverrideUrlLoading ()
方法回调拦截 url - 通过
WebChromeClient
的onJsAlert()
、onJsConfirm()
、onJsPrompt()
方法回调拦截JS对话框alert()
、confirm()
、prompt()
消息
2.2.1 方法分析
方式1:通过
WebView
的addJavascriptInterface()
进行对象映射步骤1:定义一个与JS对象映射关系的Android类:AndroidtoJs
AndroidtoJs.java(注释已经非常清楚)
// 继承自Object类 public class AndroidtoJs extends Object { // 定义JS需要调用的方法 // 被JS调用的方法必须加入@JavascriptInterface注解 @JavascriptInterface public void hello(String msg) { System.out.println("JS调用了Android的hello方法"); } }
步骤2:将需要调用的JS代码以
.html
格式放到src/main/assets文件夹里需要加载JS代码:javascript.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Carson</title> <script> function callAndroid(){ // 由于对象映射,所以调用test对象等于调用Android映射的对象 test.hello("js调用了android中的hello方法"); } </script> </head> <body> //点击按钮则调用callAndroid函数 <button type="button" id="button1" "callAndroid()"></button> </body> </html>
步骤3:在Android里通过WebView设置Android类与JS代码的映射
详细请看注释
public class MainActivity extends AppCompatActivity { WebView mWebView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mWebView = (WebView) findViewById(R.id.webview); WebSettings webSettings = mWebView.getSettings(); // 设置与Js交互的权限 webSettings.setJavaScriptEnabled(true); // 通过addJavascriptInterface()将Java对象映射到JS对象 //参数1:Javascript对象名 //参数2:Java对象名 mWebView.addJavascriptInterface(new AndroidtoJs(), "test");//AndroidtoJS类对象映射到js的test对象 // 加载JS代码 // 格式规定为:file:///android_asset/文件名.html mWebView.loadUrl("file:///android_asset/javascript.html");
特点
- 优点:使用简单
仅将Android对象和JS对象映射即可
- 缺点:存在严重的漏洞问题,具体请看文章:你不知道的 Android WebView 使用漏洞
方式2:通过
WebViewClient
的方法shouldOverrideUrlLoading ()
回调拦截 url- 具体原理:
- Android通过
WebViewClient
的回调方法shouldOverrideUrlLoading ()
拦截 url - 解析该 url 的协议
- 如果检测到是预先约定好的协议,就调用相应方法
即JS需要调用Android的方法
- 具体使用:
步骤1:在JS约定所需要的Url协议
JS代码:javascript.html
以.html格式放到src/main/assets文件夹里
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Carson_Ho</title> <script> function callAndroid(){ /*约定的url协议为:js://webview?arg1=111&arg2=222*/ document.location = "js://webview?arg1=111&arg2=222"; } </script> </head> <!-- 点击按钮则调用callAndroid()方法 --> <body> <button type="button" id="button1" "callAndroid()">点击调用Android代码</button> </body> </html>
当该JS通过Android的
mWebView.loadUrl("file:///android_asset/javascript.html")
加载后,就会回调shouldOverrideUrlLoading ()
,接下来继续看步骤2:步骤2:在Android通过WebViewClient复写
shouldOverrideUrlLoading ()
MainActivity.java
public class MainActivity extends AppCompatActivity { WebView mWebView; // Button button; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mWebView = (WebView) findViewById(R.id.webview); WebSettings webSettings = mWebView.getSettings(); // 设置与Js交互的权限 webSettings.setJavaScriptEnabled(true); // 设置允许JS弹窗 webSettings.setJavaScriptCanOpenWindowsAutomatically(true); // 步骤1:加载JS代码 // 格式规定为:file:///android_asset/文件名.html mWebView.loadUrl("file:///android_asset/javascript.html"); // 复写WebViewClient类的shouldOverrideUrlLoading方法 mWebView.setWebViewClient(new WebViewClient() { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { // 步骤2:根据协议的参数,判断是否是所需要的url // 一般根据scheme(协议格式) & authority(协议名)判断(前两个参数) //假定传入进来的 url = "js://webview?arg1=111&arg2=222"(同时也是约定好的需要拦截的) Uri uri = Uri.parse(url); // 如果url的协议 = 预先约定的 js 协议 // 就解析往下解析参数 if ( uri.getScheme().equals("js")) { // 如果 authority = 预先约定协议里的 webview,即代表都符合约定的协议 // 所以拦截url,下面JS开始调用Android需要的方法 if (uri.getAuthority().equals("webview")) { // 步骤3: // 执行JS所需要调用的逻辑 System.out.println("js调用了Android的方法"); // 可以在协议上带有参数并传递到Android上 HashMap<String, String> params = new HashMap<>(); Set<String> collection = uri.getQueryParameterNames(); } return true; } return super.shouldOverrideUrlLoading(view, url); } } ); } }
特点
- 优点:不存在方式1的漏洞;
- 缺点:JS获取Android方法的返回值复杂。
如果JS想要得到Android方法的返回值,只能通过 WebView 的
loadUrl ()
去执行 JS 方法把返回值传递回去,相关的代码如下:// Android:MainActivity.java mWebView.loadUrl("javascript:returnResult(" + result + ")"); // JS:javascript.html function returnResult(result){ alert("result is" + result); }
#方式3:通过
WebChromeClient
的onJsAlert()
、onJsConfirm()
、onJsPrompt()
方法回调拦截JS对话框alert()
、confirm()
、prompt()
消息在JS中,有三个常用的对话框方法:
方式3的原理:Android通过
WebChromeClient
的onJsAlert()
、onJsConfirm()
、onJsPrompt()
方法回调分别拦截JS对话框
(即上述三个方法),得到他们的消息内容,然后解析即可。下面的例子将用**拦截 JS的输入框(即
prompt()
方法)**说明 :- 常用的拦截是:拦截 JS的输入框(即
prompt()
方法) - 因为只有
prompt()
可以返回任意类型的值,操作最全面方便、更加灵活;而alert()对话框没有返回值;confirm()对话框只能返回两种状态(确定 / 取消)两个值
步骤1:加载JS代码,如下:
javascript.html以.html格式放到src/main/assets文件夹里
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Carson_Ho</title> <script> function clickprompt(){ // 调用prompt() var result=prompt("js://demo?arg1=111&arg2=222"); alert("demo " + result); } </script> </head> <!-- 点击按钮则调用clickprompt() --> <body> <button type="button" id="button1" "clickprompt()">点击调用Android代码</button> </body> </html>
当使用
mWebView.loadUrl("file:///android_asset/javascript.html")
加载了上述JS代码后,就会触发回调onJsPrompt()
,具体如下:- 如果是拦截警告框(即
alert()
),则触发回调onJsAlert()
; - 如果是拦截确认框(即
confirm()
),则触发回调onJsConfirm()
;
步骤2:在Android通过
WebChromeClient
复写onJsPrompt()
public class MainActivity extends AppCompatActivity { WebView mWebView; // Button button; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mWebView = (WebView) findViewById(R.id.webview); WebSettings webSettings = mWebView.getSettings(); // 设置与Js交互的权限 webSettings.setJavaScriptEnabled(true); // 设置允许JS弹窗 webSettings.setJavaScriptCanOpenWindowsAutomatically(true); // 先加载JS代码 // 格式规定为:file:///android_asset/文件名.html mWebView.loadUrl("file:///android_asset/javascript.html"); mWebView.setWebChromeClient(new WebChromeClient() { // 拦截输入框(原理同方式2) // 参数message:代表promt()的内容(不是url) // 参数result:代表输入框的返回值 @Override public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) { // 根据协议的参数,判断是否是所需要的url(原理同方式2) // 一般根据scheme(协议格式) & authority(协议名)判断(前两个参数) //假定传入进来的 url = "js://webview?arg1=111&arg2=222"(同时也是约定好的需要拦截的) Uri uri = Uri.parse(message); // 如果url的协议 = 预先约定的 js 协议 // 就解析往下解析参数 if ( uri.getScheme().equals("js")) { // 如果 authority = 预先约定协议里的 webview,即代表都符合约定的协议 // 所以拦截url,下面JS开始调用Android需要的方法 if (uri.getAuthority().equals("webview")) { // // 执行JS所需要调用的逻辑 System.out.println("js调用了Android的方法"); // 可以在协议上带有参数并传递到Android上 HashMap<String, String> params = new HashMap<>(); Set<String> collection = uri.getQueryParameterNames(); //参数result:代表消息框的返回值(输入值) result.confirm("js调用了Android的方法成功啦"); } return true; } return super.onJsPrompt(view, url, message, defaultValue, result); } // 通过alert()和confirm()拦截的原理相同,此处不作过多讲述 // 拦截JS的警告框 @Override public boolean onJsAlert(WebView view, String url, String message, JsResult result) { return super.onJsAlert(view, url, message, result); } // 拦截JS的确认框 @Override public boolean onJsConfirm(WebView view, String url, String message, JsResult result) { return super.onJsConfirm(view, url, message, result); } } ); } }
- Demo地址
上述所有代码均存放在:Carson_Ho的Github地址 : WebView Demo
2.2.2 三种方式的对比 & 使用场景
3. 总结
- 本文主要对Android通过WebView与JS的交互方式进行了全面介绍
- 关于WebView的系列文章对你有所帮助
Android开发:最全面、最易懂的Webview详解
Android:你不知道的 WebView 使用漏洞
手把手教你构建 Android WebView 的缓存机制 & 资源预加载方案 - 接下来我会继续讲解其他安卓开发的知识,有兴趣可以继续关注Carson_Ho的安卓开发笔记!!!!
请帮顶和评论点赞!因为你们的赞同/鼓励是我写作的最大动力!
欢迎关注carson_ho的微信公众号
-
videojs中文文档详解
2018-07-05 10:31:23最近弄视频直播,网上没有全面的中文文档,只好自己整理了一份详细的api。Video.js是一款web视频播放器,支持...引入video.js和video-js.css,使用video标签就像下面这样: &lt;video id="e...最近弄视频直播,网上没有全面的中文文档,只好自己整理了一份详细的api。Video.js是一款web视频播放器,支持html5和flash两种播放方式。更有自定义皮肤,插件,组件,语言还有丰富的选项配置。
入门使用
- 引入video.js和video-js.css
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>
- 使用video标签就像下面这样:
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264" poster="http://vjs.zencdn.net/v/oceans.png"> <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"> </video>
- videojs使用方式就是以类似的方式开始的,不过由于我们借助videojs对视频进行一些控制或制定
var player = videojs('example_video_1',{ muted: true, controls : true/false, height:300, width:300, loop : true, // 更多配置..... });
常用事件
- 播放 this.play()
- 停止 – video没有stop方法,可以用pause 暂停获得同样的效果
- 暂停 this.pause()
- 销毁 this.dispose()
- 监听 this.on(‘click‘,fn)
- 触发事件this.trigger(‘dispose‘)
var options = {}; var player = videojs(‘example_video_1‘, options, function onPlayerReady() { videojs.log(‘播放器已经准备好了!‘); // In this context, `this` is the player that was created by Video.js.<br> // 注意,这个地方的上下文, `this` 指向的是Video.js的实例对像player this.play(); // How about an event listener?<br> // 如何使用事件监听? this.on(‘ended‘, function() { videojs.log(‘播放结束了!‘); }); });
常用选项
autoplay : true/false 播放器准备好之后,是否自动播放 【默认false】
controls : true/false 是否拥有控制条 【默认true】,如果设为false ,那么只能通过api进行控制了。也就是说界面上不会出现任何控制按钮
height: 视频容器的高度,字符串或数字 单位像素 比如: height:300 or height:‘300px‘
width: 视频容器的宽度, 字符串或数字 单位像素
loop : true/false 视频播放结束后,是否循环播放
muted : true/false 是否静音
poster: 播放前显示的视频画面,播放开始之后自动移除。通常传入一个URL
preload:预加载
‘auto‘ 自动
’metadata‘ 元数据信息 ,比如视频长度,尺寸等
‘none‘ 不预加载任何数据,直到用户开始播放才开始下载
children: Array | Object 可选子组件 从基础的Component组件继承而来的子组件,数组中的顺序将影响组件的创建顺序哦。options 选项
标准元素选项
这些选项中的每一个也可用作标准元素属性 ; 因此,可以使用设置指南中列出的所有三种方式定义它们。通常,未列出默认值,因为这是留给浏览器供应商的。autoplay
类型: boolean
如果true/作为属性存在,则在播放器准备就绪时开始播放。注意:从iOS 10开始,Apple autoplay在Safari中提供支持。有关详细信息,请参阅“新增功能。
controls
类型: boolean
确定播放器是否具有用户可以与之交互的控件。没有控件,启动视频播放的唯一方法是使用autoplay属性或通过Player API。height
类型: string|number
设置视频播放器的显示高度(以像素为单位)。loop
类型: boolean
使视频一结束就重新开始。muted
类型: boolean
默认情况下会静音任何音频。poster
类型: string
在视频开始播放之前显示的图像的URL。这通常是视频的框架或自定义标题屏幕。一旦用户点击“播放”,图像就会消失。preload
类型: string
建议浏览器是否应在加载元素后立即开始下载视频数据。支持的值是:
‘auto’
立即开始加载视频(如果浏览器支持)。某些移动设备不会预加载视频,以保护用户的带宽/数据使用。这就是为什么这个价值被称为’汽车’,而不是更具决定性的东西’true’。
这往往是最常见和推荐的值,因为它允许浏览器选择最佳行为。
‘metadata’
仅加载视频的元数据,其中包括视频的持续时间和尺寸等信息。有时,元数据将通过下载几帧视频来加载。
‘none’
不要预加载任何数据。浏览器将等待用户点击“播放”开始下载。src
类型: string
要嵌入的视频源的源URL。width
类型: string|number
设置视频播放器的显示宽度(以像素为单位)。Video.js特定的选项
undefined除非另有说明,否则默认情况下每个选项
aspectRatio
类型: string
将播放器置于流体模式,并在计算播放器的动态大小时使用该值。该值应表示比率 - 由冒号(例如"16:9"或"4:3")分隔的两个数字。autoSetup
类型: boolean
阻止播放器为具有data-setup属性的媒体元素运行autoSetup 。注意:必须在与videojs.options.autoSetup = falsevideojs源加载生效的同一时刻全局设置。
children
类型: Array|Object
此选项继承自基Component类。fluid
类型: boolean
何时true,Video.js播放器将具有流畅的大小。换句话说,它将扩展以适应其容器。此外,如果元素具有"vjs-fluid",则此选项自动设置为true。
inactivityTimeout
类型: number
Video.js表示用户通过"vjs-user-active"和"vjs-user-inactive"类以及"useractive"事件与玩家进行交互。在inactivityTimeout决定了不活动的许多毫秒声明用户闲置之前是必需的。值为0表示没有inactivityTimeout,用户永远不会被视为非活动状态。
language
键入:string,默认值:浏览器默认值或’en’
与播放器中的一种可用语言匹配的语言代码。这为播放器设置了初始语言,但始终可以更改。在Video.js中了解有关语言的更多信息。
languages
类型: Object
自定义播放器中可用的语言。此对象的键将是语言代码,值将是具有英语键和翻译值的对象。在Video.js中了解有关语言的更多信息
注意:通常,不需要此选项,最好将自定义语言传递给videojs.addLanguage()所有玩家!
nativeControlsForTouch
类型: boolean
明确设置关联技术选项的默认值。notSupportedMessage
类型: string
允许覆盖Video.js无法播放媒体源时显示的默认消息。playbackRates
类型: Array
严格大于0的数字数组,其中1表示常速(100%),0.5表示半速(50%),2表示双速(200%)等。如果指定,Video.js显示控件(类vjs-playback-rate)允许用户从选择数组中选择播放速度。选项以从下到上的指定顺序显示。例如:
videojs('my-player', { playbackRates: [0.5, 1, 1.5, 2] });
plugins
类型: Object
这支持在初始化播放器时使用自定义选项自动初始化插件 - 而不是要求您手动初始化它们。videojs('my-player', { plugins: { foo: {bar: true}, boo: {baz: false} } });
以上大致相当于:
var player = videojs('my-player'); player.foo({bar: true}); player.boo({baz: false});
虽然,由于plugins选项是对象,因此无法保证初始化顺序!
有关Video.js插件的更多信息,请参阅插件指南。
sources
类型: Array
一组对象,它们反映了本机元素具有一系列子元素的能力。这应该是带有src和type属性的对象数组。例如:
videojs('my-player', { sources: [{ src: '//path/to/video.mp4', type: 'video/mp4' }, { src: '//path/to/video.webm', type: 'video/webm' }] });
使用元素将具有相同的效果:
<video ...> <source src="//path/to/video.mp4" type="video/mp4"> <source src="//path/to/video.webm" type="video/webm"> </video>
techCanOverridePoster
类型: boolean
使技术人员有可能覆盖玩家的海报并融入玩家的海报生命周期。当使用多个技术时,这可能很有用,每个技术都必须在播放新源时设置自己的海报。
techOrder
输入:Array,默认值:[‘html5’]
定义Video.js技术首选的顺序。默认情况下,这意味着Html5首选技术。其他注册的技术将在此技术之后按其注册顺序添加。
vtt.js
类型: string
允许覆盖vtt.js的默认URL,该URL可以异步加载到polyfill支持WebVTT。
此选项将用于Video.js(即video.novtt.js)的“novtt”版本中。否则,vtt.js与Video.js捆绑在一起。
组件选项
Video.js播放器是一个组件。与所有组件一样,您可以定义它包含的子项,它们出现的顺序以及传递给它们的选项。
这是一个快速参考; 因此,有关Video.js中组件的更多详细信息,请查看组件指南。
children
类型: Array|Object
如果Array- 这是默认值 - 这用于确定哪些子节点(按组件名称)以及在播放器(或其他组件)上创建它们的顺序:
// The following code creates a player with ONLY bigPlayButton and // controlBar child components. videojs('my-player', { children: [ 'bigPlayButton', 'controlBar' ] });
该children选项还可以作为传递Object。在这种情况下,它用于提供options任何/所有孩子,包括禁用它们false:
// This player's ONLY child will be the controlBar. Clearly, this is not the // ideal method for disabling a grandchild! videojs('my-player', { children: { controlBar: { fullscreenToggle: false } } });
${componentName}
类型: Object
可以通过组件名称的低驼峰案例变体(例如controlBarfor ControlBar)为组件提供自定义选项。这些可以嵌套在孙子关系的表示中。例如,要禁用全屏控件:
videojs('my-player', { controlBar: { fullscreenToggle: false } });
技术选择
${techName}
类型: Object
Video.js回放技术(即“技术”)可以作为传递给该videojs功能的选项的一部分给予自定义选项。它们应该在技术名称的小写变体下传递(例如"flash"或"html5")。
flash
swf
指定Video.js SWF文件在Flash技术位置的位置:videojs('my-player', { flash: { swf: '//path/to/videojs.swf' } });
但是,更改全局默认值通常更合适:
videojs.options.flash.swf = ‘//path/to/videojs.swf’
html5nativeControlsForTouch
类型: boolean
只有技术支持Html5,此选项可以设置true为强制触摸设备的本机控件。
nativeAudioTracks
类型: boolean
可以设置为false禁用本机音轨支持。最常用于videojs-contrib-hls。
nativeTextTracks
类型: boolean
可以设置为false强制模拟文本轨道而不是本机支持。该nativeCaptions选项也存在,但只是一个别名nativeTextTracks。
nativeVideoTracks
类型: boolean
可以设置为false禁用本机视频轨道支持。最常用于videojs-contrib-hls。
. -
pdf.js使用方法
2018-06-08 14:46:32项目中 显示 pdf 的功能,浏览过不少的技术帖,都不太理想,花了点时间研究了下pdf.js正确使用方法,总结下:1.防止自己忘记 2.工作留有痕迹 3.供大家参考借鉴 pdf.js: 将 PDF 文件解析后生成一张 .png 图片,利用 ...在阅读之前跟各位小伙伴说明下, 这篇文章收费了, 真的很遗憾,虽然收费了,但这篇文章真的能够帮助您解决pdf使用问题,相信不会让你失望的 ,您可以看下阅读量,点赞人数,收藏人数
2020.8.18
项目中 显示 pdf 的功能,浏览过不少的技术帖,都不太理想,花了点时间研究了下pdf.js正确使用方法,总结下:1.防止自己忘记 2.工作留有痕迹 3.供大家参考借鉴
pdf.js: 将 PDF 文件解析后生成一张 .png 图片,利用 canvas 元素显示在页面上,此方法不推荐使用, 呈现在页面上的pdf会模糊,目前没有找到有效解决办法,给爱钻研的小伙伴提供个思路,在pdf.js官网上有这样一句话 : Each PDF page has its own viewport which defines the size in pixels(72DPI) and initial rotation. 猜想如果可以改变默认72DPI就可改变呈现的清晰度
上面是最开始探索 pdf.js 使用的方法 时 的猜想 其实 pdf.js 真正使用方法非常简单 (一行代码就可以搞定)
pdf.js使用步骤
一. 到官网下载 pdf.js 插件并解压 (地址: http://mozilla.github.io/pdf.js/ )
1: 进入官网
2 : 选择稳定版 下载
3: 下载至本地
4 : 解压
5:创建PDF.js文件夹 并将刚解压的文件放入其中
二.将 PDF.js 文件夹 放到 项目服务器根目录下
小伙伴 可能会有点头晕 先跟着做 稍后解释
1.登录 项目服务器
2.登录 服务器 后将 PDF.js 文件夹 拷贝 到 项目 服务器 的根目录
三. 使用 pdf.js 显示 pdf 文件
1.打开浏览器 新建一个 标签页 输入 你的项目服务器 地址
这里我用我的服务器 地址进行演示 10.0.0.5
2.当 你访问 项目 服务器 根目录(10.0.0.5) 能够 看到 PDF.js 这个文件夹 说明 这一步已经完成了
3.在PDF.js 中 依次打开 web 文件夹 viewer.html 文件 (PDF.js/web/viewer.html)
4.随后会显示 截图上的 pdf 文件
5.在地址栏中 http://10.0.0.5/PDF.js/web/viewer.html?file=你的pdf地址
解释: 我这里显示的pdf文件 是服务器上本来 就有的测试文件 请看下图
如果 你的 地址栏 中 ? 后面 file = PDF地址 可以显示 pdf 那么 基本上成功了
四. 在项目中使用
<iframe :src="http://10.0.0.5/PDF.js/web/viewer.html?file=PDF地址" width="100%" height="99%"></iframe>
开篇 说一行代码就可以搞定 没有骗你吧
到这里 PDF.js 的使用讲述完了
下面提供的下 我的github 上的pdf.js 使用方法
点我下载PDFViewer;使用方法都在 README.md 文件中
如果不了解gitHub的同学请往下看:
- 点我下载会跳到这个页面
2.点击页面上绿色按钮 clone or download
3.剩下的步骤 按照 readme.md 做就可以了
创建一个交流群(QQ)
群名称:PDF.js
群 号:754891076
-
js实现replaceAll方法
2018-10-21 22:07:00js本来有replace方法,请看w3school的说明: replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。 语法: stringObject.replace(regexp/substr,replacement) 第一个参数...js本来有replace方法,请看w3school的说明:
replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
语法:
stringObject.replace(regexp/substr,replacement)
第一个参数为一个字符串或者一个正则表达式,第二个参数为一个字符串或者一个用于生成字符串的函数。
注意重点:如果 regexp 具有全局标志 g,那么 replace() 方法将替换所有匹配的子串。否则,它只替换第一个匹配子串。
实例:
var str = "dogdogdog"; var str2 = str.replace("dog","cat"); console.log(str2);
这里仅替换第一个dog字符串,输出为
catdogdog
。
js中是没有replaceAll方法的,那么如何实现替换所有匹配的字符串呢,即在js中实现replaceAll方法:
1. 使用具有全局标志g的正则表达式
var str = "dogdogdog"; var str2 = str.replace(/dog/g,"cat"); console.log(str2);
实现替换全部匹配字符串,输出结果为:
catcatcat
。2. 使用另一种具有全局标志g的正则表达式
var str = "dogdogdog"; var str2 = str.replace(new RegExp("dog","gm"),"cat"); console.log(str2);
输出结果同上例。这里g表示执行全局匹配,m表示执行多次匹配。
3. 给string对象添加原型方法replaceAll()
String.prototype.replaceAll = function(s1, s2) { return this.replace(new RegExp(s1, "gm"), s2); }
这样就可以像使用replace方法一样使用replaceAll方法:
var str = "dogdogdog"; var str2 = str.replaceAll("dog", "cat"); console.log(str2);
输出结果同上例。
4. 使用先split,再join的方法
评论区
@默默之
分享的这个方法太赞了,拉到正文里以免有人不看评论,感谢@默默之
分享。var str = "dogdogdog"; var str2 = str.split("dog").join("cat") console.log(str2);
输出结果同上例。
-
Three.js 中文文档和在线演示实例
2016-06-16 19:40:24Three.js是当下最流行的网页3D渲染JS引擎,其主要是对WebGL编程以面向对象方式进行的封装。 踏得网专注于HTML5技术生态链的资源开发,鉴于网络上Three.js方面的资料比较散乱,且良莠不齐, 因此我们把Three.js的官方... -
JS生成uuid的四种方法
2018-08-27 16:30:44在开发过程中,有时候需要js生成全局唯一标识符,在java中可以使用uuid,但是JS中没有现成的函数。 总结了一下,JS生成唯一标识符的几种方法。 第一种: function uuid() { var s = []; var hexDigits = &... -
如何创建一个JS文件以及调用JS文件
2018-09-24 22:32:43建立一个txt文件更改后缀名为js,建立完成... 二、JAVA编辑器 1.首先在的WebContent或者任何一个资源文件夹下建立一个JS文件夹。 步骤:点击WebContent,按Ctrl + N,搜索文件夹,创建一个名为js文件夹。 2.然后... -
js 实现纯前端将数据导出excel两种方式,亲测有效
2018-05-23 14:33:27由于项目需要,需要在不调用后台接口的情况下,将json数据导出到excel表格,参考了好多资料以及很多大佬写的博客终于实现,兼容chrome没问题,其他还没有测试过,这边介绍两种实现方式,并附上代码和gif动图,博主... -
js中如何将object转化为json数据,json数据转js对象
2018-10-10 16:38:22js对象转json数据: JOSN.stringify(); json数据转js对象: JSON.parse(); -
JavaScript进阶(二)在一个JS文件中引用另一个JS文件
2016-01-03 10:41:50在一个JS文件中引用另一个JS文件 方法一 在调用文件的顶部加入下例代码: document.write(””); (注:有时你引用的文件还可能需要引用其他的js,我们需要将需要的那个js文件也以同样的方法引用进来) 方法二 通过... -
js中数组的4种遍历方式
2017-01-10 10:04:53js的数组遍历 -
JS实现图片轮播效果(自动和手动)
2018-05-30 16:45:06底下小按钮切换 ps:由于很多同志反馈无法总有各种奇怪的情况,所以有需要的直接下载整个工程:JS实现图片轮播效果 以下为实现代码: 首先是html代码: 最简单的轮播效果 小按钮数量无法确定,由js动态生成 < > 接... -
成功解决internal/modules/cjs/loader.js:596 throw err; ^ Error: Cannot find module 'express'
2018-07-05 14:33:52成功解决internal/modules/cjs/loader.js:596 throw err; ^ Error: Cannot find module 'express' 目录 解决问题 解决思路 解决办法 解决问题 F:\File_Solidity\nodetemplate>npm ... -
AR.js打造高效WebAR(three.js+AR.js)
2018-03-11 23:29:22最近做完一个WebAR的室内导航项目,AR开发部分是基于ar.js做的。ar.js很棒的一处是结合three.js进行3D渲染。当然ar.js都是国外大牛封装开发的,我只是简单分享下向大家介绍下ar.js,并分享下ar.js开发的心得,同时也... -
SheetJS js-xlsx简介
2018-09-26 17:39:58https://github.com/SheetJS/js-xlsx https://sheetjs.com/ 各种电子表格格式的解析器和编写器。来自官方规范,相关文档和测试文件的Pure-JS cleanroom实现。强调解析和编写健壮性,跨格式功能与统一的JS表示兼容... -
JS 入门教程-02-js 语句和 js 注释
2018-04-24 18:43:54JS 语句 分号 JavaScript 代码块 JavaScript 对大小写敏感 空格 JS 注释 单行注释 多行注释 目录导航 JS 语句 如果你以前接触过 C/C++/C#/Java,对于 JS 学习起来应该会感觉很简单。 这部分内容很多语言... -
js的三种使用方式(行内js、内部js、外部js)
2017-06-11 09:35:271、行内js:js不单独写出 js使用方式1:行内js 2、内部js:script里的程序整个页面都可以用 js使用方式2:内部js //声明一个函数(整个文档都可以使用) function surprise() { alert('恭喜你... -
JS识别二维码、JS生成二维码
2018-06-30 16:28:37最近的项目中使用到了识别二维码和生成二维码,都是用JS生成的,应用在了移动端,在网上搜罗了许多进行验证,下面是我在项目中应用的: 识别二维码 1.JS文件和测试页面压缩包:... -
Three.js编辑器editor使用详解
2020-08-03 15:34:14Three.js编辑器editor使用详解官网下载Three.js压缩包其他的文件内容如下:了解过文件内容之后下一步: 官网下载Three.js压缩包 github官网源码包 解压后文件目录如下图: 其他的文件内容如下: Build目录:包含两... -
js文件中引用另一个js文件
2017-09-22 14:17:53方法一,在调用文件的顶部加入下例代码:document.write(”’/js/import.js’>”);方法二,在js中写如下代码:var newscript = document.createElement('script'); newscript.setAttribute('type','text/javasc -
pdf.js移动端展示预览打开pdf-pdfh5.js
2018-08-01 11:35:53pdf.js移动端展示预览打开pdf-pdfh5.js 本插件基于pdf.js和jQuery,可手势捏合缩放,支持懒加载(即分段加载)。QQ群:651601340。 github地址:https://github.com/gjTool/pdfh5 示例地址:... -
js引入另一个js文件 两种方法
2019-03-24 10:29:08js1.js引入js2.js,两个文件同目录 方法一: document.write("<script type='text/javascript' src='js2.js'></script>"); 方法二: import 'js2.js'; -
js代码中引入js文件
2019-06-04 15:32:02script src='xxx.js'></script>"); 方式二: var ele= document.createElement("script"); ele.setAttribute("type", "text/javascript"); ele.setAttribute("src", "xxx.js"); docum... -
js 中将string转化为double,避免产生多位数和计算精度损失。
2015-09-23 19:53:58整理一下,在写js代码时,我们经常会因为带有小数的运算而头痛。因为它会出现产生多位数和计算精度损失。 在Java代码中我们可以有以下3种方式转化 parseFloat("123.2") parseInt("121"); parseDouble()但是我们... -
JS 实现完美include
2017-11-19 17:28:57转载于:...让我们想想这样1个场景,a.js 需要用到1个公用的common.js,当然你可以在用到a.js的页面使用,但假设有5个页面用到了a.js,你是不是要写5遍 已有js include的一些问题 -
js如何实现关闭当前页面
2018-11-01 15:38:05js如何实现关闭当前页面 // 关闭当前页面 window.opener = null; window.open('', '_self'); window.close(); -
js重置伪类样式;js重置affter;js重置before;js动态修改ClassName(兼容IE8及以上)
2018-04-08 12:02:45js重置伪类样式;js重置affter;js重置before;js动态修改ClassName;(兼容IE8及以上) html代码: &amp;amp;lt;div id=&amp;quot;user_name&amp;quot; class=&amp;quot;... -
node.js和vue.js
2018-10-25 16:22:42什么是node.js node.js不是一门语言,不是库,不是框架,只是一个javeScript运行时环境 简单的就是node.js可以解析和执行javeScript代码,以前只有浏览器可以解析执行JaveScript代码, 现到的javeScript可以... -
js实现截图并保存图片(html转canvas、canvas转image)
2018-07-23 15:16:43js实现截图并保存图片在本地(html转canvas、canvas转image) 一、html转canvas 需要的库html2canvas.js和canvas2image.js 话不多说,直接上代码! html &amp;amp;amp;lt;h2&amp;amp;amp... -
JS获取整个网页html代码
2018-06-11 14:26:06JS获取整个网页html代码 参考资料:JS获取整个网页html代码
-
IBM企业安全运营中心(SOC)实践分享.pdf
-
PHP终止脚本执行
-
玩转 Spring 全家桶
-
区块链应用开发实战(Go语言方向)
-
agl_spec_v1.0_final.pdf
-
VRML 学校漫游实例
-
django.core.exceptions.ImproperlyConfigured: mysqlclient 1.3.13 or newer is required; you have 0.7.1
-
MyBatis.zip
-
小tip: 微博新版查看大图前后浏览的另外一种实现
-
Linux(一)资源.zip
-
MaxScale 实现 MySQL 读写分离与负载均衡
-
2021 年该学的 CSS 框架 Tailwind CSS 实战视频
-
击剑比赛专业手势与用语
-
freemarker官网
-
2019-2020年在线直播行业研究报告.pdf
-
ES5中新增的Array方法详细说明
-
多目标跟踪全解析,全网最全
-
“集中式融合的性能一定优于分布式融合的性能”存疑
-
2010年下半年 信息系统项目管理师 上午试卷 综合知识 软考真题【含答案和答案解析】
-
C# 简单ADO.NET数据库教程