video tag bugs on Android

[alibaba]

video tag bugs on Android

[yuanyan]

The default is http or https when start with //?

[zshshr]

@amdgigabyte Video src must be a complete URL with scheme、host and path，otherwise I can not give the default scheme accurately .

[sospartan]

@yuanyan URL without scheme is considered as a local file path in android , I'll add @zshshr 's suggestion into the doc later.

@amdgigabyte can you post your code here which caused strange behaviors?

[amdgigabyte]

@sospartan ok，I will post the code later.Now I think I have implemented the UI interaction in a hacking mode.

[amdgigabyte]

It is the video and video control panel position mismatch.
I think the bug might be a misuse example of the video tag. When I put a video into a list, the bug occurs.

<template>
    <container>
        <list>
            <cell>
                <container id="videoWrap" class="video-wrap">
                    <video
                           class="video"
                           onpause="onpause"
                           onstart="onstart"
                           onfinish="onfinish"
                           onfail="onfail"
                           src="http://cloud.video.taobao.com/play/u/522794875/p/2/e/6/t/1/d/ld/fv/2/23335165.mp4"
                           auto-play="true">
                    </video>
                </container>
            </cell>
            <cell>
                <text style="width:750px;height:500px;background-color: #999999;">
                    hahahahahahahahahahahahahahahhhshfsjfsjsfjfsjkfsjfjk
                </text>
            </cell>
            <cell>
                <div style="flex-direction: row; justify-content: center;">
                    <image class="banner-image" onclick="{{init}}" src="//gw.alicdn.com/tps/TB1JlSDLFXXXXaBaXXXXXXXXXXX-702-349.jpg"></image>
                </div>
            </cell>
            <cell>
                <text style="width:750px;height:2000px;background-color: #333333;">
                    hahahahahahahahahahahahahahahhhshfsjfsjsfjfsjkfsjfjk
                </text>
            </cell>
        </list>

    </container>
</template>

<style>
    .video-wrap {
        position: absolute;
        width:750px;
        height: 460px;
        transform: translate(0,0) scale(1, 0);
        overflow: hidden;
        top: 0;
        left:0;
        z-index:1;
        margin:0 auto;
        background-color: #000000;
    }
    .video-control {
        position:absolute;
        top:10px;
        right:10px;
    }
    .close-btn {
        color:#ffffff;
        font-size:50px;
    }
    .banner-image {
        width:702px;
        height:350px;
    }
    .video {
        width: 750px;
        height: 460px;
    }
</style>

<script>
    module.exports = {};
</script>

[sospartan]

Android's default video player controller is a float window above your app. That cause this behavior.
See http://developer.android.com/reference/android/widget/MediaController.html
It's only for basic use. According your case a customize controller panel is required. I'll put this feature in my schedule. You can send a pull request about it too.

[WangXiZhu]

目前我定义了视频容器的宽度和高度，这个panel定位还是在视频的中间部分。虽然是浮动，不知道能不能通过定位的方式，将panel能够较好的放在靠近底部一点。