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

1

2 Answers 2

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.

1
  • Setting null did not work for me. Adding a transparent 1px png did the trick though!
    – rodurico
    Aug 30, 2022 at 19:05
-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"

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.