Windows Phone 8 上完美解决WEB页面中视频播放的兼容性问题

Windows Phone 8 上完美解决WEB页面中视频播放的兼容性问题

随着移动应用的飞速发展，越来越多的应用使用Webview 和 WebBrowser 加载更多Web页面。方便地让用户获取更多的资源。 比如，大家熟悉的新闻客户端，视频客户端，公众页面，和运动类应用等。同时，随着在线视频提供商越来越多，用移动设备浏览器观看视频的用户也快速增长。

但是如果应用的Web页面对于Windows Phone 8 的IE 浏览器和WebBrowser 控件没有做好适配工作，可能会造成视频无法播放，或提示安装Flash player。

一般基于WEB页面的视频播放有三种方案，

1，HTML5标签

2，Flash方式播放

3，MP4Link方式播放

Windows Phone8 平台支持标准的HTML5方式和MP4Link方式，通过启动独立的媒体播放器播放视频。不支持Flash方式。

下面是一些常见问题的总结：

问题1

使用Windows Phone8 上的IE10或Webbrower 控件打开页面时，会有未安装flash player的提示，同时视频无法播放。从不同的入口打开视频都会遇到同样的问题

- 从网站进入

- 从微博，微信的分享中打开视频页面

- 从搜索引擎（包括www.soku.com）

- 嵌在网页和文档里的链接

比如早期的优酷HTML5页面里遇到过的问题。

原因：

1. Windows Phone 8 上的IE10 browser和 Webbrowser 控件是不支持Flash (.SWF) 的播放。

2. 错误判断User-Agent 。WP8上的IE10 browser和 Webbrowser的UA字符串里都有 “MSIE 10.0” 字段。如果页面只判断这个字段就认为是PC IE浏览器，就会造成提示安装flash player的错误。

解决办法：

1. 正确判断 User-Agent。 IE10 WP8 有两个UA，分别是：

Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 920)

这个UA，对应的是手机模式。Webbrowser 控件使用IE10 手机模式内核，同样也是这个UA

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0; ARM; Touch; WPDesktop)

这个UA，对应的是WP8 IE10计算机模式。

所以在有视频的WEB里页面，除了判断”MSIE” ， 还需要判断”IEMobile” 和 ”WPDesktop”, 来决定页面请求来自WP8 IE10 或 Webbrowser控件。 提供相应 MP4 的视频格式

优酷按照这个方法解决后的页面效果

2. 优化播放页界面

在WP8 IE10 的指导网页 - http://blogs.windows.com/windows_phone/b/wpdev/archive/2012/10/17/getting-websites-ready-for-internet-explorer-10-on-windows-phone-8.aspx 有一段描述：

If you have a WebKit-optimized site (for iOS/Android), consider using that code as the basis for Internet Explorer 10 because it has extensive standards-compliant HTML5 support. In some cases, this will require ensuring that “-webkit” prefixed properties also have standards-compliant counterparts.

问题2

目前Windows Phone8 上的默认视频播放不支持HTTP Live Streaming（HTTP 实时流式处理）(HLS)，格式 .m3u8， 所以对于WP8的设备，在WEB页面里不要提供m3u8视频格式。

问题3

使用标准HTML5方式时，不能省略H5 video标签信息。一定保证信息完整。

比如：

Http get url - http://v.youku.com/v_show/id_XNTY1OTA4Mjgw.html?x

Youku http response - <video id="youku-html5player-video" preload="none" src="http://65.255.35.2/youku/65731C68969368360613D26AF9/030020010051AC5EA7986F0095008857AD4926-E570-53CF-C70C-8BE097D67AD0.mp4" style="width: 100%; height: 100%; display: block; position: relative;"></video>

一定提供完整的 “video src”

下面这张图，可以详细地总结对于Windows Phone8 上的浏览器的视频页面适配

 

转载于:https://www.cnblogs.com/LeonLiangWP/p/3641606.html