小程序video视频组件封面显示失效问题

菜鸟老五

已于 2023-07-11 15:06:11 修改

阅读量1.2w

点赞数 2

分类专栏：小程序 VUE/H5 文章标签： video 小程序微信小程序

于 2018-04-20 14:43:36 首次发布

本文链接：https://blog.csdn.net/qq_35695041/article/details/80018327

版权

小程序同时被 2 个专栏收录

63 篇文章 9 订阅

订阅专栏

VUE/H5

30 篇文章 2 订阅

订阅专栏

相信很多制作或者学习小程序的同行可能会遇到这个问题，话不多说，上解决办法

相信很多制作或者学习小程序的同行可能会遇到这个问题，话不多说，上解决办法

//这里是一个video组件，但是因为video视屏组件的封面属性闪现失效问题，

//我在video组件中写了一个cover-view

//（这里注意，它会覆盖掉视屏，但是不会覆盖播放按钮，在video组件中给播放按钮添加一个单击事件bindplay="bindplay"）

//wxss文件

.tab_con_img{

background: url("http://p2.so.qhimgs1.com/t019ffe68eb65f668ae.jpg");

position: absolute;

top: 60rpx;

width: 690rpx;

border: 0rpx;

background-color: red;

height: 390rpx;



}

//wxml文件
<video class='tab_con_img' bindplay="bindplay" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" enable-danmu controls="true" page-gesture >

<cover-view class="controls" style="display:{{tab_image}}">

<cover-image class="img" src="../../image/z5.png" />

</cover-view>

</video>

//Js文件

data: {
tab_image: "block" //默认显示封面图片
},

//这里点击播放按钮事件，播放视屏【把封面图片隐藏】
bindplay: function(e) {
this.setData({
tab_image: "none"
})



}

video概述：解决封面失效/适配问题

官网：Video.js - Make your player yours | Video.js
H5视频播放器，不支持H5的话就自动切换到flash
可以播放video，也可以支持流媒体HLS

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.引入videojs样式文件 -->
    <link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />

    <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
    <!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>

<body>
    <!-- 2.添加video标签 -->
    <!-- vjs-big-play-centered可使大的播放按钮居中，vjs-fluid可使视频占满容器 -->
    <video 
	    id="my-video" 
	    class="video-js vjs-big-play-centered" 
	    controls 
	    preload="auto" 
	    width="640" 
	    height="264" 
	    poster="封面图" 
	    data-setup="{}"
    >
        <source src="视频路径地址" type="video/mp4" />
    </video>

    <!-- 3.引入video.js库文件 -->
    <script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>

</body>

</html>