背景：

在uniapp中，需要使用<video></video>標(biāo)簽進(jìn)行播放動(dòng)態(tài)src的視頻。

1.在開(kāi)發(fā)的時(shí)候，運(yùn)行到瀏覽器，vedio標(biāo)簽正常；(使用HbuildX運(yùn)行，運(yùn)行 -->運(yùn)行到瀏覽器)。

2.但是在打包成原生App，安裝.apk后綴的應(yīng)用程序，vedio播放視頻就不正常。(使用HbuildX打包，發(fā)行 --> 原生App-云打包)。

問(wèn)題截圖：

問(wèn)題描述：在App上，視頻停在屏幕上，在頁(yè)面中不會(huì)跟隨頁(yè)面滾動(dòng)而滾動(dòng)。

問(wèn)題分析：

1.研究<video>標(biāo)簽，是否某個(gè)屬性設(shè)置錯(cuò)誤；

2.給對(duì)應(yīng)的video標(biāo)簽添加上對(duì)應(yīng)的css樣式，是否是樣式問(wèn)題；

3.查看uniapp框架。因?yàn)樵诠雀铻g覽器播放視頻都是正常的，到手機(jī)上不正常，查看uniapp框架相關(guān)。

4.搜索相關(guān)博客，解決問(wèn)題。

一、video標(biāo)簽

官網(wǎng)：點(diǎn)擊跳轉(zhuǎn)官網(wǎng)

1.基本用法屬性：

• id: 給視頻標(biāo)簽一個(gè)唯一的 ID。
• class: 用于樣式控制。
• src: 視頻的 URL，可以是本地路徑或者網(wǎng)絡(luò)地址。
• controls: 顯示默認(rèn)的視頻控件。
• autoplay: 自動(dòng)播放視頻。
• loop: 循環(huán)播放視頻。
• muted: 靜音播放視頻

 2.事件監(jiān)聽(tīng)

• @start: 監(jiān)聽(tīng)視頻播放事件。
• @pause: 監(jiān)聽(tīng)視頻暫停事件。
• @finish: 監(jiān)聽(tīng)視頻播放結(jié)束事件。

備注：瀏覽uniapp框架下的video標(biāo)簽，發(fā)現(xiàn)沒(méi)有屬性能夠控制其保持在電子屏幕不動(dòng)。、

進(jìn)一步說(shuō)明這個(gè)是手機(jī)端才有的Bug 

二、video標(biāo)簽的css樣式

在某些情況下，視頻可能會(huì)被固定在屏幕上，而不是隨著頁(yè)面滾動(dòng)。這可能是由于視頻元素的層級(jí)或樣式問(wèn)題?？梢試L試以下方法：

確保視頻的樣式設(shè)置正確，使其能夠隨著頁(yè)面滾動(dòng)。

<template>
  <view class="container">
    <video
      id="myVideo"
      class="video"
      src="/static/videos/your-video.mp4"
      controls
      autoplay
      loop
      muted
      preload="auto"
      x5-video-player-type="h5"
      x5-video-player-fullscreen="true"
      x5-playsinline
      playsinline
      webkit-playsinline
    ></video>
  </view>
</template>
<style>
.container {
  width: 100%;
  height: 300px;
  background-color: #f0f0f0;
  overflow: hidden; /* 確保容器能夠滾動(dòng) */
}
.video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative; /* 確保視頻能夠隨頁(yè)面滾動(dòng) */
}
</style>

在某些設(shè)備上，硬件加速或渲染層可能導(dǎo)致視頻渲染問(wèn)題?？梢試L試禁用硬件加速或調(diào)整渲染層設(shè)置： 

<template>
  <view class="container">
    <video
      id="myVideo"
      class="video"
      src="/static/videos/your-video.mp4"
      controls
      autoplay
      loop
      muted
      preload="auto"
      x5-video-player-type="h5"
      x5-video-player-fullscreen="true"
      x5-playsinline
      playsinline
      webkit-playsinline
    ></video>
  </view>
</template>
<style>
.container {
  width: 100%;
  height: 300px;
  background-color: #f0f0f0;
  overflow: hidden; /* 確保容器能夠滾動(dòng) */
}
.video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative; /* 確保視頻能夠隨頁(yè)面滾動(dòng) */
  will-change: transform; /* 提示瀏覽器優(yōu)化渲染 */
  transform: translateZ(0); /* 強(qiáng)制開(kāi)啟 GPU 加速 */
}
</style>

備注：

我使用了對(duì)應(yīng)的css樣式，但是問(wèn)題沒(méi)有解決。 

三、uniapp框架下的video標(biāo)簽

查看了uniapp框架下的video標(biāo)簽，但是沒(méi)有對(duì)應(yīng)的屬性能夠解決問(wèn)題。

四、vedio原生組件層級(jí)高于前端組件

意思是： 

1.Video是屬于原生組件的,層級(jí)是最高的,無(wú)法被其他內(nèi)容所覆蓋,當(dāng)然也不會(huì)跟著div的overflow-y:scroll進(jìn)行滑動(dòng),只會(huì)一直浮在表層,擋住其他元素。

2.部分組件如map、video、textarea、canvas通過(guò)原生控件實(shí)現(xiàn)，原生組件層級(jí)高于前端組件（類似flash層級(jí)高于div）。

為了能正常覆蓋原生組件，設(shè)計(jì)了cover-view。

uni官網(wǎng)的官方文檔：點(diǎn)擊跳轉(zhuǎn)官網(wǎng)

cover-view使用示例：

//cover-view標(biāo)簽得在<video>標(biāo)簽內(nèi)部
<template>
	<view>
		<video style="position: relative;" src="https://haokan.baidu.com/v?pd=wisenatural&vid=18309277609015821003">
<cover-view style="width: 100px;height: 100px;background-color: 
      #fff;position:absolute;left: 0;">
</cover-view>
		</video>
	</view>
</template>
<script>
	export default {
		data() {
			return {
			}
		},
		methods: {
		}
	}
</script>
<style>
</style>

cover-view使用的問(wèn)題：

uni-app 原生APP 模式下 video 層級(jí)過(guò)高，頁(yè)面滾動(dòng)后會(huì)覆蓋自定義頂部 tabbar和自定義底部菜單，很多人都只是說(shuō) cover-view 覆蓋，但是cover-view必須在video里面才是有效的，cover-view 在原生app里面無(wú)法嵌套內(nèi)容 。

vue頁(yè)面層級(jí)覆蓋解決方案： 點(diǎn)擊跳轉(zhuǎn)官網(wǎng)

三種方式對(duì)比： 

1.cover-view

更適合在視頻上邊添加某些組件,比如播放按鈕或者什么功能。

cover-view或者cover-image，放在video標(biāo)簽內(nèi)使用，子絕父相

2.plus.nativeObj.view

這個(gè)是安卓的原生寫法,看了很多資料,發(fā)現(xiàn)是能解決相當(dāng)多種類的問(wèn)題,但是畢竟原生語(yǔ)法會(huì)難一些,在時(shí)間不夠的情況下很難去學(xué)好怎么使用原生語(yǔ)言滿足當(dāng)前的需求，但如果時(shí)間充足且有條件的基礎(chǔ)下可以采用這個(gè)方法 。

plus.nativeObj.View()  繪制原生畫布，有點(diǎn)擊事件。不屬于dom，可以覆蓋webview和各種原生控件

plus.nativeObj.view官方文檔。因?yàn)槠M件，較復(fù)雜，可自行選擇學(xué)習(xí)

Html5產(chǎn)業(yè)聯(lián)盟。關(guān)于video標(biāo)簽的相關(guān)文檔

3.subNVue

subNVue是原生渲染的nvue子窗體，把一個(gè)nvue頁(yè)面以半屏的方式覆蓋在vue頁(yè)面上

subnvue 創(chuàng)建原生子窗體，放在當(dāng)前頁(yè)面下，放好位置即可。

首先創(chuàng)建nvue文件。最好放入同級(jí)。

在 pages.json 中，新增了 subNVues 節(jié)點(diǎn),配置 subNVue 子窗體的相關(guān)屬性。

在 pages.json 中增加完配置，也寫好了 subNVue 子窗體，接下來(lái)就是在 vue/nvue 頁(yè)面中使用了。

uni-app subNVue 原生子窗體開(kāi)發(fā)指南

參考博客：參考博客 

五、video標(biāo)簽一個(gè)解決辦法 

最后在網(wǎng)上參考了其他人的一份解決方案，剛好解決此問(wèn)題。

封裝一個(gè)組件，利用iframe實(shí)現(xiàn)：

//MyVideo組件
//自行封裝一個(gè)組件，利用iframe實(shí)現(xiàn)
<template>
	<iframe :onload="onloadCode" style="width:100%;height:100%;border:1px solid #fff;background: #000;"></iframe>
</template>
<script>
	export default {
		props: {
			src: {}
		},
		data() {
			return {
				onloadCode: ''
			}
		},
		created() {
			this.onloadCode =
				`this.contentWindow.document.body.innerHTML = '<video style="width: 100%;height: 100%" controls="controls" src="${this.src}"></video>';`
		},
	}
</script>
<style lang="scss">
</style>

使用方式：

在其他頁(yè)面調(diào)用注冊(cè)此封裝的組件，并傳遞視頻資源src 

//其它頁(yè)面調(diào)用
<MyVideo :src="item.img" v-for="(item, index) in vediosData" :key="index" class="video"></MyVideo>

 寫在最后，我們這里只是簡(jiǎn)單的在App端播放視頻，且動(dòng)態(tài)賦值src。如果還有其它復(fù)雜的布局內(nèi)部嵌套video標(biāo)簽也是不成功的，例如：<swiper>、<scroll-view>等

到此這篇關(guān)于uniapp video播放視頻 懸浮在屏幕無(wú)法滑動(dòng)的文章就介紹到這了,更多相關(guān)uniapp video播放視頻內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論