0

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 ?

picture 1

xiangzuomanongerbude
  • 117
  • 1
  • 2
  • 16
  • Maybe this is the answer you are looking for ? http://stackoverflow.com/questions/8911247/hide-iphone-html5-video-play-button – Strahdvonzar Feb 10 '17 at 08:35

2 Answers2

2

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.

xiangzuomanongerbude
  • 117
  • 1
  • 2
  • 16
-1

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"

François Maturel
  • 5,884
  • 6
  • 45
  • 50
Zebra-Running
  • 1