1. 程式人生 > >視訊播放標籤-

視訊播放標籤-

現在如果要在頁面中使用video標籤,需要考慮三種情況,支援Ogg Theora或者VP8(如果這玩意兒沒出事的話)的(Opera、Mozilla、Chrome),支援H.264的(Safari、IE 9、Chrome),都不支援的(IE6、7、8)。好吧,現在讓我們從技術層面來認識HTML 5的視訊,包括video標籤的使用,視訊物件可以用到的媒介屬性和方法,以及媒介事件。

Video標籤的使用

Video標籤含有src、poster、preload、autoplay、loop、controls、width、height等幾個屬性, 以及一個內部使用的標籤<source>。Video標籤內除了可以包含<source>標籤外,還可以包含當指定的視訊都不能 播放時,返回的內容。

(1) src屬性和poster屬性

你能想象src屬性是用來幹啥的。跟<img>標籤的一樣,這個屬性用於指定視訊的地址。而poster屬性用於指定一張圖片,在當前視訊資料無效時顯示(預覽圖)。視訊資料無效可能是視訊正在載入,可能是視訊地址錯誤等等。

<video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay"></video>

(2) preload屬性

這個屬性也能通過名字瞭解用處,此屬性用於定義視訊是否預載入。屬性有三個可選擇的值:none、metadata、auto。如果不使用此屬性,預設為auto。

<video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none"></video>

None:不進行預載入。使用此屬性值,可能是頁面製作者認為使用者不期望此視訊,或者減少HTTP請求。

Metadata:部分預載入。使用此屬性值,代表頁面製作者認為使用者不期望此視訊,但為使用者提供一些元資料(包括尺寸,第一幀,曲目列表,持續時間等等)。

Auto:全部預載入。

(3) autoplay屬性

又是一個看名字知道用處的屬性。Autoplay屬性用於設定視訊是否自動播放,是一個布林屬性。當出現時,表示自動播放,去掉是表示不自動播放。

<video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none"></video>

注意,HTML中布林屬性的值不是true和false。正確的用法是,在標籤中使用此屬性表示true,此時屬性要麼沒有值,要麼其值恆等於他的名字 (此處,自動播放為<video autoplay />或者<video autoplay=”autoplay” />);而在標籤中不使用此屬性表示false(此處不進行自動播放為<video />)。

 (4) loop屬性

<video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" loop="loop"></video>

一目瞭然,loop屬性用於指定視訊是否迴圈播放,同樣是一個布林屬性。

(5) controls屬性

<video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"></video>

Controls屬性用於向瀏覽器指明頁面製作者沒有使用指令碼生成播放控制器,需要瀏覽器啟用本身的播放控制欄。

控制欄須包括播放暫停控制,播放進度控制,音量控制等等。

每個瀏覽器預設的播放控制欄在介面上不一樣。由於我瀏覽器的詭異問題,Firefox和Safari的Video標籤不正常,所以這兩個只能在網上找截圖了。

(6) width屬性和height屬性

屬於標籤的通用屬性了,這個不用多說。

(7) source標籤

<video width="658" height="444" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"><source src="http://www.youname.com/images/first.ogv" /><source src="http://www.youname.com/images/first.ogg" /></video>

Source標籤用於給媒體(因為audio標籤同樣可以包含此標籤,所以這兒用媒體,而不是視訊)指定多個可選擇的(瀏覽器最終只能選一個)檔案地址,且只能在媒體標籤沒有使用src屬性時使用。

瀏覽器按source標籤的順序檢測標籤指定的視訊是否能夠播放(可能是視訊格式不支援,視訊不存在等等),如果不能播放,換下一個。此方法多用於相容不同的瀏覽器。Source標籤本身不代表任何含義,不能單獨出現。

此標籤包含src、type、media三個屬性。

src屬性:用於指定媒體的地址,和video標籤的一樣。

Type屬性:用於說明src屬性指定媒體的型別,幫助瀏覽器在獲取媒體前判斷是否支援此類別的媒體格式。

Media屬性:用於說明媒體在何種媒介中使用,不設定時預設值為all,表示支援所有媒介。你想到<style>標籤的media屬性了麼?一樣一樣一樣的。

(8) 一個完整的例子

<video width="658" height="444" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"><source src="http://www.youname.com/images/first.ogv" /><source src="http://www.youname.com/images/first.ogg" /></video>

這段程式碼在頁面中定義了一個視訊,此視訊的預覽圖為poster的屬性值,顯示瀏覽器的預設媒體控制欄,預載入視訊的元資料,迴圈播放,寬度為900畫素,高度為240畫素。

第一選擇視訊地址為第一個source標籤的src屬性值,視訊類別為Ogg視訊,視訊編碼譯碼器為Theora,音訊編碼譯碼器為Vorbis,播放媒 介為顯示器;第二選擇視訊地址不再累述。如果你還要相容IE的話,可以在最後一個source標籤後再加上Flash播放器的標籤集,或者使用一點 JavaScript程式碼。

相關推薦

視訊播放標籤-

現在如果要在頁面中使用video標籤,需要考慮三種情況,支援Ogg Theora或者VP8(如果這玩意兒沒出事的話)的(Opera、Mozilla、Chrome),支援H.264的(Safari、IE 9、Chrome),都不支援的(IE6、7、8)。好吧,現在讓我們從技術層

HTML5之視訊播放標籤

播放標籤:<video> 一、作用:<video>標籤是用來定義視訊,比如電影片段或其他視訊流 二、屬性: 1、autoplay:值為autoplay,如果出現該屬性,則視訊就就緒後馬上播放 2、controls:值為controls,如果出現該屬

頁面中H5的使用標籤如音訊播放器和視訊播放

1.音訊播放器使用的標籤為: <audio src="音訊的地址" controls="controls" preload="auto" autoplay="autoplay" loop="loop"> 屬性中src 為音訊的地址路徑,loop 是迴圈播放,如

前端視訊播放初探總結,video標籤-視訊外掛jwplayer

1.HTML5原生支援<video> 簡單使用: <video src="../TestRes/test.mp4" autoplay controls></video> html5的video標籤只支援mp

安卓和前段互動——視訊播放video標籤橫豎屏

第一和前段互動做視訊的播放記錄一下。需求:前段播放視訊 可以全屏點選,點選全屏按鈕原生橫屏,點選取消橫屏原生豎屏。問題:一開始做的時候因為對webview的WebChromeClient裡面的方法瞭解的不全面,所以想到的第一種方案就是讓前段監聽全屏按鈕的點選事件當全屏時候呼叫

使用video標籤實現多個視訊播放

這兩天在做一個功能,實現視訊切換的功能,即點選按鈕實現視訊內容切換的功能。上圖:思路很簡單:點選視訊一隱藏視訊二,點選視訊二隱藏視訊一,--,感覺和沒說差不多。程式碼如下:<!DOCTYPE html> <html lang='en'> <he

視訊video標籤在移動端的播放總結

昨天新上線了一個關於騰訊18週年嘉年華的html5,這個html5是有5段不同的視訊組成,中間使用各種手勢進行串聯,歡迎大家訪問。眾所周知,在移動端的視訊和音訊都是需要使用者手動點選開啟的,而使用autoplay或在js裡寫play()是沒有任何作用的。還有幾個常見的問題這裡

HTML5的多個video標籤:擷取視訊源的封面圖poster,監聽視訊播放狀態的功能;

// 視訊------視訊截圖 ~~ 視訊播放狀態 ~~ const setMedia = function(video, scale = 0.8) { // 設定poster屬性:(非本地視訊資源會有跨域截圖問題) video.addEventListene

QT實時視訊播放介面設計

QT播放介面設計 今天寫了個QT的實時視訊播放介面,其實要寫一個播放介面非常容易,以下為程式碼 首先定義一個用於播放的控制元件: * PlsyItem.h #ifndef PLAYITEM_H #define PLAYITEM_H #include <QObject&

WebView 視訊播放,全屏按鈕顯示不出來,全屏後不能播放視訊

最近專案的一個需求,需要在Webview 裡面播放視訊遇到了一些問題: 視訊可以正常播放但是,視訊底部的全屏按鈕沒了,只有一個音量按鈕。修改後,點選全屏,視訊不能播放。 接下來一 一解決: 問題1 :沒有全屏按鈕: 如圖:可以看到只有一個音量按鈕,沒有全屏按鈕。 查了一

微信小程式(看文件寫例項四)微信小程式課堂寶APP實現簽到子頁面佈局及課程視訊播放頁面

一、簽到子頁面佈局 子頁面主要是一個簽到按鈕,然後下方是簽到記錄列表。 1、簽到按鈕 佈局程式碼: <button class='sign-button' bindtap='sign'>簽到</button>

H5視訊播放以及下載!

<!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <meta name="viewport" content="initial-sca

iOS 超好用的本地視訊播放器推薦!

本地播放器作為日常生活中不可或缺的一款工具類APP,Windows、Android等平臺不乏一些功能與體驗兼優的產品,但 iOS 平臺的使用者就沒有那麼幸運了,優秀的產品鳳毛麟角,且多數收費。 這源於 iOS 平臺的特殊性,完美支援各種視訊格式並不容易,幾乎沒有大廠在這方面投入,QQ影音

ExtJS實現視訊播放功能以及設定視訊播放起始時間呼叫mediaplayer

ExtJS在語法上用起來和JS還是有一定區別,初始用起來很不習慣,但總起來說還是把視訊播放的功能做出來了,分享出來,以供參考。 使用ExtJS呼叫mediaplayer其實還是用的<embed>標籤或者使用<object></object>標籤,在我參考不少文

第二十四篇-用VideoView製作一個簡單的視訊播放

這是一個播放本地視訊的播放器,videoUrl1是手機裡放置視訊的路徑 效果圖: MainActivity.java package com.example.aimee.videotest; import android.Manifest; import android.co

video.js+swiper 視訊播放結束後三秒播放下一個,點選播放視訊

代嗎 <!DOCTYPE html> <html>   <head> <meta charset="UTF-8"> <title></title> <link rel="stylesh

基於FFmpeg 和 OpenGL 的視訊播放 【C++】

環境: GLFW版本為 2.7.9 GLM版本為 0.9.4.6(需自己編譯生成 dll 和 lib) OpenGL 3.+ 以下程式碼僅僅通過ffmpeg解碼視訊(沒有處理音訊流),然後通過OpenGL進行顯示(或通過Shader對視訊幀進行處理)

Android 仿抖音仿美拍視訊播放列表

首先實現方式是 1.RecyclerView                       2.ViewPager 我這裡實現的方式是用的RecyclerView,歡迎大家共同探討

基於NDK、C++、FFmpeg的android視訊播放器開發實戰-夏曹俊-專題視訊課程

基於NDK、C++、FFmpeg的android視訊播放器開發實戰—1796人已學習 課程介紹         課程包含了對流媒體(拉流)的播放,演示了播放rtmp的香港衛視,支援rtsp攝像頭和h

Unity全景圖片加全景視訊播放(滑鼠控制視角方向自由預覽)

最近也是週末做了一個全景圖片加視訊,滑鼠控制方向全景預覽和視訊預覽。 準備材料: 1.首先去歷覽器下載一個360全景圖片,網上資源很多。 2.去網上下載一個icon,ps後作為跳轉視訊的按鈕。(我就是怎麼做的,當然知識體驗效果的話,到不必要求審美) 3.除要有Unity引擎之外,