微信开发之网页中加入视频和音频

在微信网页开发中会出现加入视频和音频的情况。现在主流的通过Video标签。video大致的用法如下:

<video src="movie.ogg" controls="controls">       您的浏览器不支持 video 标签。
</video>这里如果你想加入什么属性在video的style里面加就好了，这里挑几个说吧。第一个就是controls属性，当选择了这个属性时，当进入网页时该视频控件上会出现播放按钮，播放进度条。第二个是poster属性，当我们设置了poster的值后，在播放该视频之前，视频的封面是这张图片。

其实我们经常会对controls进行修改，因为这个设置controls后放到移动端不是很好年，因为点击会进入到右图所示，也就是跳离了原来的网页，进入了这个所谓的全屏播放的界面。

而我需要做的是不进入到右边所示的界面，直接在网页上播放，也就是如下所示：

<video src="/video/yhbk.mp4" width="100%" height="90%" controls x5-playsinline="true"></video>

这里面加入了 x5-playsinline="true" 这个属性使得视频在原始位置播放。

在这里我们可以看到第一幅图，如下所示：用户一进入到该界面就会出现这些控件，在这里个人感觉不是很好，因此我想不通过controls这个属性来实现视频的播放。但是如果去除controls的化，这些控件会全部消失。

因此我的想法是通过一个去阿里巴巴矢量库下载一个播放按钮，也就是一个img，将img所在的div放置到video所在的div的上层，在这个img上加上Onclick事件，从而实现播放的效果，代码如下。


<div class="videoAndaudio">
	<div class="control">	
			<video id="my-video" src="/video/yhbk.mp4"  style="width: 335px; height: 188px; 
        object-fit: fill"  x5-playsinline="true"  poster="/coursepic/beiyun_yqxz_1.png" >
			        请升级浏览器以支持 html5 video
			</video>
	</div>
	<div class="playbutton">
		<img id="play_img" alt="" src="/tubiao/play-circle.png" onclick="playPause()" 
         height="50" width="50">
	</div>
</div>

<script type="text/javascript">
var myVideo=document.getElementById("my-video"); 
function playPause(){	
	myVideo.play(); 
	$("#play_img").hide();
}
</script>

css代码如下:设置img所在的div的z-index比video所在的div的z-index大即可，这样就可实现img悬浮在video上。

.playbutton{
	z-index:9999;
	position:absolute;
	padding-left:45%;
	padding-top:17%;
}
.control{
	position:absolute;
	z-index:-1;
}
.videoAndaudio{
	position:relative;
	
	
}

2.音频的样式更改:

<audio controls loop width="335px">
      <source src="/audio/xiaotiaowa.mp3" type="audio/mpeg"></source> 
      <p>This browser does not support our audio format.</p>
</audio>

效果如下:

这样的样式也不是我所需要的,我需要更改其样式

这里我参考了这位博主的 https://gitee.com/Dandelion_/html_demo/tree/master/H5-audio，记得引用css和js文件，效果如下。

微信开发之网页中加入视频和音频

猜你喜欢