Android HTML5视频问题

Question

I am using HTML5 video tag to play an online video on Samsung tablet with android 5.0, but some issues come up. And it works fine on 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. the video does not autoplay although I have set autoplay;

2. there is an ugly big play button along with the poster I set, as seen in the picture1 the world map is my poster ;

3. how can I hide the default play button in code ?

Answer 1

It is the poster's issue. I think if the poster is not set in code. The webview would set a default one for the video tag. So I set the value of poster as 'null'. It is ok.

Answer 2

I am successfully playing video on Android 4.2.2 , 4.3 , 4.4.4 , 5.0 , 5.1 . solution:

• Install crosswalk

• Tell angular to trust the URL $scope.vidURL = $sce.trustAsResourceUrl(data.vidURL);

• Wrap the video element in a div with data-tap-disable="true"