H5中使用video注意事项

太过爱你忘了你带给我的痛 2023-07-19 06:00 5阅读 0赞

<dir class="video-box-inner">
              <div class="video-play" @click="videoPlay" v-if="playIcon"></div>
              
              <video
                v-if="videoUrl"
                id="myVideo"
                ref="video"
                webkit-playsinline="true"
                playsinline="true"
                x5-playsinline="true"
                x5-video-player-fullscreen="false"
                x5-video-player-type="h5"
                x5-video-orientation="portraint"
                width="100%"
                height="100%"
                style="vertical-align:top;object-fit: fill;"
                :poster="detail.pictureUrl"
                @click="videoPlay"
              >
                <source :src="videoUrl" type="video/mp4" />
              </video>
            </dir>

1.动态src不显示问题：

使用 v-if 就可以了

2.自定义播放按钮：样式如下

.video-box-inner {
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
    
      .video-play {
        width: 130px;
        height: 130px;
        background: url('https://img.cdn.zhaoshang800.com/img/2020/03/26/broker/b65737cb-5458-47b3-b658-bccd893603e4.png');
        background-size: 100% 100%;
        position: absolute;
        top: 580px;
        left: 310px;
        right: 0;
        bottom: 0;
        z-index: 9999;
      }

js点击事件：

videoPlay() {
          this.videoDoc = document.getElementById("myVideo");
          if (this.videoDoc.paused) {
            this.videoDoc.play();
            this.playIcon = false;
          } else {
            this.videoDoc.pause();
            this.playIcon = true;
          }
        },

发表评论取消回复

表情：

评论列表（有 0 条评论，5人围观）

还没有评论，来说两句吧...

相关阅读

相关 H5中使用video注意事项

<dir class="video-box-inner"> <div class="video-play" @click="videoPla

太过爱你忘了你带给我的痛/ 2023年07月19日 06:00/ 0 赞/ 6 阅读

相关 H5开发注意事项

最近从PC转到H5开发，学习了不少新的技能如下： 1. 在Chrome下，调整Debug工具至适应手机适配环境: iPhone 6/7/8； 2. 根据UI，选择“像素”

骑猪看日落/ 2022年12月27日 07:27/ 0 赞/ 177 阅读

相关 uni-app的H5版使用注意事项

HBuilderX 1.2开始包含了H5平台支持。使用方式 1. 打开uni-app项目下的vue文件 2. 点击菜单运行->运行到浏览器->Chrome

快来打我*/ 2022年12月20日 05:34/ 0 赞/ 180 阅读

相关使用mysql注意事项_使用MySQL的注意事项

安装MySQL时候的注意事项？ 1、如果您是用MySQL+Apache，使用的又是FreeBSD网路操作系统的话，安装时候你应按注意到FreeBSD的版本问题，在FreeBS

我会带着你远行/ 2022年10月25日 01:44/ 0 赞/ 303 阅读

相关 5.使用Kettle的注意事项

文章目录 1.文件路径问题 1.1绝对路径 1.2相对路径 2.操作相关 2.1操

不念不忘少年蓝@/ 2022年10月21日 14:51/ 0 赞/ 203 阅读

相关 uni-app在H5平台使用video.js

前言项目中用到了视频监控功能，而这部分功能还是外包给第三方做的，他们只提供了jquery+video.js的demo。uni-app中video是组件不是原生video

一时失言乱红尘/ 2022年10月07日 01:59/ 0 赞/ 135 阅读

相关 QtQuick中使用ListView注意事项

1、使用不定高度（或宽度）的Delegate ListView的delegate属性如果设置为具有不定高度（或宽度）的组件（例如Text），当手动设置ListView的c

忘是亡心i/ 2022年09月25日 08:26/ 0 赞/ 224 阅读

相关 qt5.8使用qwebenginview注意事项

环境qt5.8，vs2015 （ui.webview必须要先show出来，不然加载不成功） 1.项目属性，c/c++，常规，附加包含目录，新增： $(QTDIR)\\i

清疚/ 2022年05月30日 12:17/ 0 赞/ 351 阅读

相关 Java中BigDecimal使用注意事项

public static void main(String[] args) { System.out.println("a="+new Big

约定不等于承诺〃/ 2022年05月08日 05:18/ 0 赞/ 320 阅读

相关 h5移动端注意事项

一、meta的使用 1、<meta name="viewport" content="width=device-width,initial-scale=1.0, min...

心已赠人/ 2022年02月19日 11:47/ 0 赞/ 533 阅读