HarmonyOS鸿蒙Next中H5的Video标签播放按钮不能点击的问题如何解决

HarmonyOS鸿蒙Next中H5的Video标签播放按钮不能点击的问题如何解决

【问题现象】

在WebView加载包含<video>标签的H5页面，对应视频中间的播放按钮不能点击。

点击放大

【背景知识】

<video>标签默认不带视频中间的播放按钮，这种效果要自行实现。

【解决方案】

各平台默认的播放器样式不一致，要保持一致需要使用自定义的播放器组件，可以为<video>添加按钮和点击事件来实现。

代码示例如下：

// 给video增加点击事件
<script type="text/javascript">
    $(".video-img").click(function(){
    $(this).hide();
    $("#video")[0].play();
    })

    $(".video-img2").click(function(){

    if ($("#video")[0].paused){

    $("#video")[0].play();

    } else {
    $("#video")[0].pause();
    }
    })

    $('#video').on('ended', function() {
    $('.video-img').show();
    });
</script>

更多关于HarmonyOS鸿蒙Next中H5的Video标签播放按钮不能点击的问题如何解决的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS鸿蒙Next中H5的Video标签播放按钮不能点击的问题如何解决的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


使用自定义播放器组件，为<video>标签添加按钮和点击事件

示例代码如下：

$(".video-img").click(function(){
    $(this).hide();
    $("#video")[0].play();
});

$(".video-img2").click(function(){
    if ($("#video")[0].paused){
        $("#video")[0].play();
    } else {
        $("#video")[0].pause();
    }
});

$('#video').on('ended', function() {
    $('.video-img').show();
});
回到顶部