Articles of html5 video

部分屏幕WebView与切成两半

我有一个具有拆分布局的平板电脑应用程序 – 左侧是列表,右侧是详细信息窗格。 右侧窗格是WebView,它包含标记。 这一切都运行正常,除了WebView的整个右侧被切断并呈现纯白色。 为什么它以这种方式呈现,如何在不插入大量黑客的情况下避免它? 我把它归结为一个简单的测试项目,我已经在github上发布了 。 这是一个截图 : http : //d.pr/i/dfEh 。 左侧的灰色区域是列表视图所属的位置。 为简单起见,我将其更改为空的FrameLayout 。 WebView右侧的截断部分与列表视图的宽度相同。 同样值得注意的是,video下方的任何内容也都被截断 – 白色区域扩展了WebView的整个高度。 我试过的一些事情: 用其他东西替换列表视图 启用和禁用WebSettings :javascript,使用宽视口,使用概览模式加载 设置WebViewClient和WebChromeClient 打开和关闭硬件加速 View.setScrollBarStyle , WebView.setVerticalScrollBarOverlay各种设置 调整的高度/宽度属性和样式 各种video格式,包括带有h264和aac,m3u8的mp4以及youtube rtsp流 各种设备,包括显示的Fire HD,Nexus 7,Galaxy 10.1和Xoom Android版本3.1,3.2,4.0,4.1 目前的解决方法: 我最后通过使用全屏WebView,将我的列表视图覆盖在其上,并在html中最外层容器元素上设置左边距来解决这个问题。 这是相当hacky,并在各种密度和分辨率上获得列表视图的大小是容易出错的,所以我真的想以正确的方式解决这个问题。 摘录: 正如我所提到的,在github上发布了一个(非)工作测试床,但这里有重要的部分: Html加载到WebView中(这就是全部): Title 主要布局文件: 在onCreateView : View rootView = inflater.inflate(R.layout.fragment_detail, container, false); webView […]

HTML5video – 在Android设备上准确搜索框架?

我正在制作一个应用程序,需要在浏览器中,跨桌面和移动设备(包括Cordova的打包应用程序)对video进行帧精确搜索。 桌面浏览器和iOS设备(包括打包应用程序和通过Safari)一样工作正常,但Android设备似乎只在video中显示关键帧 (也称为帧内帧或i帧)。 我在jsfiddle上设置了一个测试页面来帮助演示我的问题 。 该video已使用ZenCoder进行编码。 它的帧速率为23.976,关键帧每250帧。 video本身显示当前帧索引,因此您可以轻松地看到只有0,250和500帧的帧正在Android设备上显示,无论您在何处寻找。 在这个阶段,我会对在Android浏览器中运行的解决方案或作为Cordova的打包应用程序感到满意(我也尝试过使用Crosswalk WebView但无济于事)。

Android Chrome上的HTML5video控件在此简单页面中不会覆盖整个video宽度

将其另存为html文件并在Android Chrome中加载: 它应该如下所示: 如果您使用它,您会发现删除overflow:hidden或transform:scale将使控件按预期跨越video的整个宽度。 但是,这两种样式的组合使得任何video控件的大小都不正确,如图所示。 这个问题似乎有点相关,并建议添加一个transform: translateZ(0)到包含元素,但是将该转换添加到正文上的现有转换或新的包含div不能解决问题。 这是Android Chrome中的错误吗? 我不明白为什么这两种样式的结合会影响video控制的宽度。

Android 4上的html5video:全屏播放,然后重定向到另一个网页 – 无法正常工作

我正在为Android 4智能手机设计一个html5页面,其中包含一个3gpp(或mp4)video,打开后必须自动播放全屏; video结束时应重定向到另一个url。 一些谷歌搜索告诉我,在Android 4上不再允许自动播放,因此我选择显示用户必须单击以启动video的海报图像。 然后: 调用全屏模式 video应该自动启动(确实是由用户点击海报图片开始的) video播放完Android后应退出全屏 最后将用户重定向到其他页面。 2和3不起作用:在调用全屏后,用户再次“点击”开始video,当video结束时,exitfullscreen不起作用(屏幕为黑色,用户必须按下手机上的“后退”键才能退出手机video播放器)。 在Android 4上会忽略video.webkitExitFullScreen()和video.play() 。 这是我正在使用的html5标记和javascript代码,你能帮我指点一个解决方案吗? 谢谢! test function videoEnd() { var video = document.getElementById(“video”); video.webkitExitFullScreen(); document.location = “http://www.google.com”; } function playVideo() { var video = document.getElementById(“video”); video.addEventListener(‘ended’, videoEnd, false); video.webkitEnterFullScreen(); video.play(); }

在Android 3.1上实现onShowCustomView会在HTML5VideoFullScreen中引发exception

我想在全屏播放html中的video。 当我点击video方法onShowCustomView上的全屏按钮时被触发。 这是我的实施: public void onShowCustomView(View view, CustomViewCallback callback) { super.onShowCustomView(view, callback); if (view instanceof FrameLayout) { customComponenet.addView(view, new FrameLayout.LayoutParams( ViewGroup.LayoutParams.FILL_PARENT, ViewGroup.LayoutParams.FILL_PARENT, Gravity.CENTER)); customComponenet.setVisibility(View.VISIBLE); } } customComponenet是将FrameLayout置于当前布局之上的位置。 Wideo打得很好,它是可见的,一切接缝都可以,但它会抛出: 08-27 22:16:07.520: ERROR/AndroidRuntime(7235): FATAL EXCEPTION: main 08-27 22:16:07.520: ERROR/AndroidRuntime(7235): java.lang.NullPointerException 08-27 22:16:07.520: ERROR/AndroidRuntime(7235): at android.webkit.HTML5VideoFullScreen.switchProgressView(HTML5VideoFullScreen.java:320) 08-27 22:16:07.520: ERROR/AndroidRuntime(7235): at android.webkit.HTML5VideoView.setPlayerBuffering(HTML5VideoView.java:319) 08-27 22:16:07.520: ERROR/AndroidRuntime(7235): at android.webkit.HTML5VideoView.start(HTML5VideoView.java:85) 08-27 22:16:07.520: […]

使用android 4浏览器自动启动html5video

我想使用android 4冰淇淋三明治浏览器自动启动android html5video。 我尝试了许多html5video的java脚本函数和autobuffer autoplay标签。 但没有任何效果。 我通过Android应用程序在webview中启动android chrome客户端,该客户端应该能够自动启动video。 单击播放按钮时播放video但不播放自动播放。 是否限制在Android? 另外需要注意的是,即使我们点击播放按钮并且video正在播放和完成,也不会在chromeClient中调用回调方法。 我已经google了一下,在Android 4上没有find关于此问题的正面结果。

如何在Android上自动播放HTML5 mp4video?

我已经开发了一个asp.net的移动页面来播放mp4video。 我知道iOS已禁用自动播放function以最小化用户带宽,那么我如何在Android上自动播放HTML5 mp4video? 我已经将自动播放放在HTML5代码中,但它不起作用。 以下是我的代码: 此外,我已经解决了用户点击图像叠加层可以播放video的问题。 谢谢Karthi 这是代码: $(document).ready(function() { $(“#video1”).bind(“click”, function() { var vid = $(this).get(0); if (vid.paused) { vid.play(); } else { vid.pause(); } }); }); 谢谢 乔

检测客户端是否允许HTML5video的内联媒体播放

是否有一种很好的方法来检测客户端浏览器是否允许HTML5video的内联媒体播放? 更新 我不是想简单地检测video支持。 我正在尝试检测video是否只能播放全屏或内联播放。 因为在iPhone的Safari游戏中,iOSvideo只能全屏播放,但在iPad上可以内嵌播放video。 并且通过内联我的意思是在页面中没有切换到全屏。

Android:“无法在’HTMLMediaElement’上执行’play’:API只能由用户手势启动

我正在研究HTML5video播放器自动化(测试页面是一个html页面)。 我试图通过Javascript调用myPlayer.Play() 。 但是,在Android上,我收到此错误: 无法在’HTMLMediaElement’上执行’play’:API只能由用户手势启动。 发送Play()请求后。 我知道为了节省用户带宽,许多设备都禁用了autoplay 。 但Play()第一次似乎也需要用户手势。 为此我的解决方法是什么,以便我可以自动测试播放器设备?

全屏时,HTML 5video崩溃

我目前正在使用屏幕方向肖像的应用程序,我有HTML 5video需要全屏支持。 我添加到webview一个WebChromeClient,重写了几个方法。 一切都工作正常,当我坚持肖像的方向,但是当我尝试切换方向风景去全屏时,我得到了一个崩溃。 任何线索? 覆盖的方法: public void onShowCustomView(View view, CustomViewCallback callback) { super.onShowCustomView(view, callback); if (mCustomViewContainer != null) { callback.onCustomViewHidden(); return; } if(interfazWeb==null) interfazWeb = (FragTabActivity) getActivity(); if (view instanceof FrameLayout) { mCustomViewContainer = (FrameLayout) view; mCustomViewCallback = callback; interfazWeb.getCustomContentView().setVisibility(View.INVISIBLE); interfazWeb.addContentView(mCustomViewContainer, new FrameLayout.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT, ViewGroup.LayoutParams.FILL_PARENT, Gravity.CENTER)); interfazWeb.setBackDelegate(new BackDelegate(){ public boolean shouldOverrideBackButton() { if(mCustomViewCallback!=null){//first calling onHideCustomView() […]