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

我正在Android4.2.2、4.3、4.4.4、5.0、5.1 上成功播放视频。 解决方案：

• 安装人行横道

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

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

Answer 2

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