h5移動網路視頻播放

① 在移動端怎麼將HTML5中的video標簽的控制項去掉或者隱藏

兩種方法如下：

1、用css隱藏video視頻播放控制項：

<style type="text/css">

video::-webkit-media-controls{

display:none !important;

}

</style>

css隱藏原生html5 video controls，這么設置後即使沒有設置controls為false，native controls也不會再出現。其他的按鈕，包括播放按鈕、播放進度條、靜音按鈕、音量條等，都可以像全屏按鈕一樣自定義樣式。不止是隱藏。

2、用js隱藏video視頻播放控制項：

<script type="text/javascript">

var video=document.getElementById("video");

video.controls=false;

</script>

HTML5的video雖然可用controls來展示控制項，並進行控制播放暫停等，但是不同的瀏覽器顯示的效果可能不一樣，所以很多時候需要使用Dom來進行自定義的一些操作和控制。

(1)h5移動網路視頻播放擴展閱讀：

HTML5 video標簽中的新屬性：

1、autoplay：如果出現該屬性，則視頻在就緒後馬上播放。

2、controls：如果出現該屬性，則向用戶顯示控制項，比如播放按鈕。

3、height：設置視頻播放器的高度。

4、loop：如果出現該屬性，則當媒介文件完成播放後再次開始播放。

5、muted：規定視頻的音頻輸出應該被靜音。

6、poster：規定視頻下載時顯示的圖像，或者在用戶點擊播放按鈕前顯示的圖像。

7、preload：如果出現該屬性，則視頻在頁面載入時進行載入，並預備播放。

8、src：要播放的視頻的 URL。

9、width：設置視頻播放器的寬度。

② HTML5中 使用video標簽 播放本地視頻

1、新建一個html文件，命名為test.html，用於介紹如何使用video控制視頻。

③ html5如何實現自動播放視頻

HTML5 是下一代的 HTML， 提供了展示視頻的標准，規定了一種通過 video 元素來包含視頻的標准方法。

純H5頁面在手機端中是無法實現自動播放，移動端瀏覽器大部分是禁用video和audio的autoplay功能並且，很多移動瀏覽器也不支持首次js調用play方法進行播放（只有用戶手動點播放後暫停，然後用代碼進行play可以）。

這樣做主要是為了防止不必要的自動播放浪費流量。

以下代碼是實現用戶第一次觸摸後實現的播放和微信app下自動播放

XML/HTML Code復制內容到剪貼板

• functionautoPlayMusic(){

• /*自動播放音樂效果，解決瀏覽器或者APP自動播放問題*/

• functionmusicInBrowserHandler(){

• musicPlay(true);

• document.body.removeEventListener('touchstart',musicInBrowserHandler);

• }

• document.body.addEventListener('touchstart',musicInBrowserHandler);

• /*自動播放音樂效果，解決微信自動播放問題*/

• functionmusicInWeixinHandler(){

• musicPlay(true);

• document.addEventListener("WeixinJSBridgeReady",function(){

• musicPlay(true);

• },false);

• document.removeEventListener('DOMContentLoaded',musicInWeixinHandler);

• }

• document.addEventListener('DOMContentLoaded',musicInWeixinHandler);

• }

• functionmusicPlay(isPlay){

• varmedia=document.getElementById('myMusic');

• if(isPlay&&media.paused){

• media.play();

• }

• if(!isPlay&&!media.paused){

• media.pause();

• }

• }

Video有以下的屬性。

height pixels 設置視頻播放器的高度。

loop loop 如果出

現該屬性，則當媒介文件完成播放後再次開始播放。

preload preload 如果出現該屬性，則視頻在頁面載入時進行載入，並預備播放。

autoplay autoplay 如果出現該屬性，則視頻在就緒後馬上播放。

controls controls 如果出現該屬性，則向用戶顯示控制項，比如播放按鈕。

如果使用 "autoplay"，則忽略該屬性。

src url 要播放的視頻的 URL。

width pixels 設置視頻播放器的寬度。

其中，如果想要實現自動播放，可以在Video裡面加上autoplay屬性就可以了。

④ 請問如何實現視頻自動播放，即打開H5鏈接視頻自動開始

兔展我不知道，epub360可以設置ios上首頁視頻自動播放。

網路搜索 epub360 或者 點擊H5頁面製作工具

⑤ 手機不用wiff不能播放H5 video屬性的視頻

你好！

可以用js的navigator.connection 具體代碼如下：

var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection || { tyep: 'unknown' };
var type_text = ['unknown', 'ethernet', 'wifi', '2g', '3g', '4g', 'none'];
alert(connection.type);
var re_el = document.getElementById("re");
var btn_el = document.getElementById("btn");
function get_status() {
if (typeof (connection.type) == "number") {
connection.type_text = type_text[connection.type];
} else {
connection.type_text = connection.type;
}
if (typeof (connection.bandwidth) == "number") {
if (connection.bandwidth > 10) {
connection.type = 'wifi';
} else if (connection.bandwidth > 2) {
connection.type = '3g';
} else if (connection.bandwidth > 0) {
connection.type = '2g';
} else if (connection.bandwidth == 0) {
connection.type = 'none';
} else {
connection.type = 'unknown';
}
}
var html = 'Type : ' + connection.type_text;
html += 'Bandwidth : ' + connection.bandwidth;
html += 'isOnline : ' + navigator.onLine;
re_el.innerHTML = html;
}
btn_el.onclick = function () {
re_el.innerHTML = 'Waiting...';
get_status();
}
以上代碼可以判斷用戶的網路情況。
希望對你有幫助。

⑥ H5 video標簽手機打開無法播放

根據你的描述，給出一個萬能的方法，要麼恢復出廠設置，要麼重新刷機，在這之前看看flash安裝正確否，可下載軟體重新安裝視頻軟體，還有視頻軟體修復工具試試

⑦ 自媒體里h5指的是什麼

HTML5是Web中核心語言HTML的規范，用戶使用任何手段進行網頁瀏覽時看到的內容原本都是HTML格式的，在瀏覽器中通過一些技術處理將其轉換成為了可識別的信息。

H5這個詞,來自」HTML5」, 所謂「HTML5」, 是指「HTML"的第5個版本，而"HTML」, 則是指描述網頁的標准語言。

幾乎所有在線的應用類網站,本質上都是一個"H5」。H5頁面簡單的說就是利用html5製作出來的頁面,利用圖片、文字、動畫、音樂等方式融合在一起來表達某種藝術效果或者推廣效果。

(7)h5移動網路視頻播放擴展閱讀

新特性

HTML5將Web帶入一個成熟的應用平台，在這個平台上，視頻、音頻、圖像、動畫以及與設備的交互都進行了規范。

1、智能表單

表單是實現用戶與頁面後台交互主要組成部分，HTML5在表單的設計上功能更加強大。input類型和屬性的多樣性大大地增強了HTML可表達的表單形式。

再加上新增加的一些表單標簽，使得原本需要JavaScript來實現的控制項，可以直接使用HTML5的表單來實現；一些如內容提示、焦點處理、數據驗證等功能，也可以通過THML5的智能表單屬性標簽來完成。

2、繪圖畫布

HTML5的canvas元索可以實現畫布功能，該元索通過自帶的API結合使用JavaScript腳本語言在網頁上繪制圖形和處理，擁有實現繪制線條、弧線以及矩形，用樣式和顏色填充區域，書寫樣式化文本，以及添加圖像的方法，且使用JavaScript可以控制其每一個像素。

HTML5的canvas元索使得瀏覽器無需Flash或Silverlight等插件就能直接顯示圖形或動畫圖像。

3、多媒體

HTML5最大特色之一就是支持音頻視頻，在通過增加了<audio>、<video>兩個標簽來實現對多媒體中的音頻、視頻使用的支持，只要在Web網頁中嵌入這兩個標簽，而無需第三方插件（如Flash）就可以實現音視頻的播放功能。

HTML5對音頻、視頻文件的支持使得瀏覽器擺脫了對插件的依賴，加快了頁面的載入速度，擴展了互聯網多媒體技術的發展空間。

4、地理定位

現今移動網路備受青睞，用戶對實時定位的應用越來，要求也越來越高。HTML5通過引入Geolocation的API可以通過GPS或網路信息實現用戶的定位功能，定位更加准確、靈活。

通過HTML5進行定位，除了可以定位自己的位置，還可以在他人對你開放信息的情況下獲得他人的定位信息。

5、數據存儲

HTML5較之傳統的數據存儲有自已的存儲方式，允許在客戶端實現較大規模的數據存儲。為了滿足不同的需求，HTML5支持DOM Storage和Web SQL Database 兩種存儲機制。

其中，DOM Storage 適用於具有key/value對的基本本地存儲；而WebSQLDatabase是適用於關系型資料庫的存儲方式，開發者可以使用SQL語法對這些數據進行查詢、插入等操作。

6、多線程

HTML5利用Web Worker將Web應用程序從原來的單線程業界中解放出來，通過創建一個Web Worker對象就可以實現多線程操作。JavaScript創建的Web程序處理事務都是在單線程中執行，響應時間較長，而當JavaScript過於復雜時，還有可能出現死鎖的局面。

HTML5新增加了一個WebWorkerAPI，用戶可以創建多個在後台的線程，將耗費較長時間的處理交給後檯面不影響用戶界面和響應速度，這些處理不會因用戶交互而運行中斷。使用後台線程不能訪問頁面和窗口對象，但後台線程可以和貞面之間進行數據交互。

⑧ html5手機端視頻播放，在PC端測試代碼可用，放到手機端就播放不了，也沒有顯示出來！ 求大神解答~~

酷播雲的多終端代碼，適用於跨平台瀏覽器，手機和電腦都可播放，希望對你有用，望採納。

⑨ html5可以播放哪些格式的視頻

HTML5支持的視頻格式在HTML5中嵌入的視頻格式主要包括ogg、mpeg4、wehm等。

具體介紹如下：

ogg：一種開源的視頻封裝容器，其視頻文件擴展名為ogg，裡面可以封裝vobris音頻編碼或者theora視頻編碼，同時ogg文件也能將音頻編碼和視頻編碼進行混合封裝。

mpeg4：目前最流行的視頻格式，其視頻文件擴展名為mp4。

同等條件下，mpeg4格式的視頻質量較好，但它的專利被MPEG－LA公司控制，任何支持播放mpeg4視頻的設備，都必須有一張MPEG－LA頒發的許可證。

(9)h5移動網路視頻播放擴展閱讀：

1、視頻格式是視頻播放軟體為了能夠播放視頻文件而賦予視頻文件的一種識別符號。

2、3GP是一種3G流媒體的視頻編碼格式，主要是為了配合3G網路的高傳輸速度而開發的，也是目前手機中最為常見的一種視頻格式。

3、MPEG（運動圖像專家組）是Motion Picture Experts Group 的縮寫，這類格式包括了MPEG－1，MPEG－2和MPEG－4在內的多種視頻格式。

4、AVI，音頻視頻交錯（Audio Video Interleaved）的英文縮寫，AVI這個由微軟公司發布的視頻格式，在視頻領域可以說是最悠久的格式之一。

5、一種獨立於編碼方式的在Internet上實時傳播多媒體的技術標准，Microsoft公司希望用其取代QuickTime之類的技術標准以及WAV、AVI之類的文件擴展名。

⑩ 如何使用html5播放視頻

1、<video src="hangge.mp4" controls></video>1

2，通過width和height設置視頻窗口大小
<video src="hangge.mp4" controls width="400" height="300"></video>1

3，預載入媒體文件
設置preload不同的屬性值，可以告訴瀏覽器應該怎樣載入一個媒體文件：
（1）值為auto：讓瀏覽器自動下載整個文件
（2）值為none：讓瀏覽器不必預先下載文件
（3）值為metadata：讓瀏覽器先獲取視頻文件開頭的數據塊，從而足以確定一些基本信息（比如視頻的總時長，第一幀圖像等）
<!-- 用戶點擊播放才開始下載 --><video src="hangge.mp4" controls preload="none"></video>12

4，自動播放
（1）使用autoplay屬性可以讓瀏覽器載入完視頻文件後立即播放。
<video src="hangge.mp4" controls autoplay></video>1

（2）如果啟用自動播放，可以將播放器設置為muted狀態。這樣自動播放時會靜音，防止用戶厭煩。用戶需要的話可以點擊播放器揚聲器圖標重新打開聲音。
<video src="hangge.mp4" controls autoplay muted></video>1

5，循環播放
使用loop屬性讓視頻播放結束時，再從頭開始播放。
<video src="hangge.mp4" controls loop></video>1

6，設置替換視頻的圖片（封面圖片）
通過poster屬性可以設置，瀏覽器在下面三種情況下會使用這個圖片：
（1）視頻第一幀未載入完畢
（2）把preload屬性設置為none
（3）沒有找到指定的視頻文件
<video src="hangge.mp4" controls poster="hangge.png"></video>1

7，瀏覽器兼容，如何讓每一個瀏覽器都能順利播放視頻
現在大部分瀏覽器都能支持H.264格式的視頻，但Opera瀏覽器卻一直不支持。我們需要通過後備措施保證每個人都能看到視頻，通常有下面幾種方案：
（1）使用多種視頻格式
<video>和<audio>元素有個內置的格式後備系統。我們不使用src屬性，而是在其內部嵌套一組<source>元素，瀏覽器會選擇播放第一個它所支持的文件。
我們可以添加WebM格式的視頻提供對Opera的支持。
<video controls>
<source src="hangge.mp4" type="video/mp4">
<source src="hangge.webm" type="video/webm">
</video>1234

（2）添加Flash後備措施（推薦）
上面那個方法不推薦，應為Opera瀏覽器只佔不到1%的份額。特意為它把視頻都轉碼一邊太費事。使用Flash作為備用播放方案還是很方便的，同時Flash還能兼容IE8這種連<video>元素都不支持的老瀏覽器。
這里使用Flowplayer Flash作為備用播放器（本地下載 ：flowplayer-3.2.18.zip）
<video controls>
<source src="hangge.mp4" type="video/mp4">
<source src="hangge.webm" type="video/webm">

<object id="flowplayer" width="400" height="300"
data="flowplayer-3.2.18.swf"
type="application/x-shockwave-flash">
<param name="movie" value="flowplayer-3.2.18.swf">
<param name="flashvars" value='config={"clip":"hangge.mp4"}'>
</object>
</video>1234567891011

（3）也有人優先使用Flash，而HTML5作為後備措施。
這么做是因為Flash普及率比較高，而HTML5作為後備可以擴展iPad和iPhone用戶
<object id="flowplayer" width="400" height="300" data="flowplayer-3.2.18.swf" type="application/x-shockwave-flash">
<param name="movie" value="flowplayer-3.2.18.swf">
<param name="flashvars" value='config={"clip":"hangge.mp4"}'>

<video controls>
<source src="hangge.mp4" type="video/mp4">
<source src="hangge.webm" type="video/webm">
</video>
</object>