Clever Geek Handbook

Android HTML5 video output

I am using HTML5 tag to play online videos on Samsung tablet with Android 5.0, but some problems occur. And it works great 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%;
}

  • the video is not autoplayed although I have set autoplay,

  • there is an ugly big play button along with the poster that I am setting, as you can see in the picture1, the world map is my poster;

  • How can I hide the default play button in code?

picture 1

0


source to share


2 answers


This is a poster question. I think if the poster is not set in the code. WebView has set the default for the video tag. So I set the poster's value to "null". This is normal.



+1


source


I have successfully reproduce the video on Android

4.2.2

, 4.3

, 4.4.4

, 5.0

, 5.1

. Decision:



  • Set up a pedestrian crossing

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

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

-1


source






More articles:


All Articles