微信開發之網頁中加入視訊和音訊

Liam_Fang_發表於2018-11-09
網頁音訊

在微信網頁開發中會出現加入視訊和音訊的情況。現在主流的通過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檔案，效果如下。

相關文章