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>