Android HTML5视频问题

Question

我正在使用HTML5视频标签在android 5.0上播放三星平板电脑上的在线视频，但出现了一些问题。它在iOS上可以正常工作。

<video id='video-widget' autoplay='true' preload autobuffer controls style="width:100%;"> 
     <source src="{{src}}"> 
    </video> 


.video-widget-container { 
    height: 469px; 
    width: 100%; 
    margin-top: 100px; 
} 

.video-widget-container video::-webkit-media-controls-overlay-play-button 
    { 
    display: none; 
    -webkit-appearance: none; 
} 

.video-widget-container video::-webkit-media-controls-panel { 
    /* display: block !important; 
    -webkit-appearance: button; */ 

} 

.video-widget-container video::-webkit-media-controls-play-button { 
    /*  display: block !important; 
    -webkit-appearance: button; */ 

} 

.video-widget-container.loading video::-webkit-media-controls-play-button 
    { 
    display: none !important; 
    -webkit-appearance: none; 
} 

#video-widget.loading video::-webkit-media-controls-play-button { 
    display: none !important; 
    -webkit-appearance: none; 
} 

.video-widget-container video::-webkit-media-controls-start-playback-button 
    { 
    display: none !important; 
    -webkit-appearance: none; 
} 

.video-widget-container video::-webkit-media-controls-enclosure { 
    /* display: block !important; 
    -webkit-appearance: button; */ 

} 



.video-widget-container video { 
    background: transparent url('../images/video/CVE_MAP.svg') no-repeat 0 0; 
    -webkit-background-size: 100% 100%; 
    -moz-background-size: 100% 100%; 
    -o-background-size: 100% 100%; 
    background-size: 100% 100%; 
} 

1. 视频不会自动播放，虽然我已经设置自动播放;

2. 有一个丑陋的大型播放按钮以及我设置的海报，如图片1所示，世界地图是我的海报;

3. 如何隐藏代码中的默认播放按钮？

Answer 1

这是海报的问题。我认为如果海报没有在代码中设置。 webview会为视频标签设置一个默认值。所以我将poster的值设置为'null'。没关系。

Answer 2

我成功地打在Android4.2.2，4.3，4.4.4，5.0，5.1视频。 解决方案：

• 安装人行横道

• 告诉角度信任URL $scope.vidURL = $sce.trustAsResourceUrl(data.vidURL);

• 裹视频元素在一个div data-tap-disable="true"