H5中使用video注意事项

太过爱你忘了你带给我的痛 2023-07-19 06:00 35阅读 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 条评论，35人围观）

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

相关阅读

相关 H5中使用video注意事项

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

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

相关 H5 video标签封面

H5 video标签封面使用视频的第一帧作为video标签的封面 <video src="地址" poster="地址+ '?x-oss-process=vi

r囧r小猫/ 2023年07月18日 09:25/ 0 赞/ 41 阅读

相关 Spring Security使用H2数据库注意事项

\Spring Security使用H2数据库web后台注意事项最近在用spring boot+spring security+h2做点事情，最开始想得还是比较简单的，但

以你之姓@/ 2023年06月19日 07:20/ 0 赞/ 14 阅读

相关 H5开发注意事项

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

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

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

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

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

相关 uni-app使用h5+的注意事项

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

水深无声/ 2022年12月09日 02:25/ 0 赞/ 6 阅读

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

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

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

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

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

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

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

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

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

相关 h5移动端注意事项

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

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