多媒體編程

時間 2019-12-07

標籤多媒體編程简体版

原文原文鏈接

多媒體和圖形編程
這個屬於在客戶端生成圖片，能夠減小服務器的壓力html

腳本化圖片

web頁面使用img元素，嵌入圖片。
img元素能夠經過控制src屬性來操控img。
一個栗子，鼠標通過的時候，改變圖片web

當鼠標通過的時候，會觸發兩個事件，分別是onmouseover以及onmouseout兩個

html以下chrome

<!doctype html>
<html>
<head>
    <title>這是一個模擬圖片翻轉的dome</title>
</head>
<body>
    <img src="images/help.gif">
</body>
</html>

js以下編程

// 獲取元素
let img = document.getElementsByTagName("img")[0]
// 綁定事件
img.addEventListener(onmouseover, () => {
   this.src="./images/help_rollover.gif"; 
})
img.addEventListener(onmouseout, () => {
    this.src="./images/help.gif";
})
img.addEventListener(onclick, () => {
    this.src="./images/help_onlick.gif";
})

因爲要實現圖片翻轉，須要較高的響應度，此時須要進行緩存，new一個Image對象建立一個HTMLImageElement對象實例
文檔 https://developer.mozilla.org...
即建立一個對象用來暫時儲存圖片。api

let myImage = new Image(10, 200);    // 設置緩存的圖片大小
myImage.src="./picture.jpg";    // 設置緩存的圖片位置
document.body.appendChild(myImage)    // 添加一個子節點

// 等價於
let img = "<img width=100 height=200 src=./picture.jpg>"
document.body.appendChild(img);

使用的是Image()類，建立對象瀏覽器

其中圖片的懶加載可使用Image類，先緩存圖片，等待用戶滑到的時候，而後觸發事件，將src進行替換。

腳本化音頻和視頻

h5中引用了兩個變遷audio和video兩個標籤
https://developer.mozilla.org...
https://developer.mozilla.org...
即便用上方兩個標籤，能夠實現簡單的視頻和音頻的插入緩存

<audio src="background_music.mp3"/>
<video src="news.mov" width=320 height=240/>

使用上方的兩個標籤實現簡單的視頻和音頻的插入服務器

因爲標準的執行問題，因此使用source標籤實現兼容
文檔 https://developer.mozilla.org...
下方是一個兼容的實現app

<video id="news" width=640 height=480 controls preload>
    <!-- Firefor chrome 支持的web格式 -->
    <source src="news.mp4" type="video/webm">
    <!-- IE和Safair支持的h。264格式 -->
    <source src="news.mp4" type="video/mp4">
    <!-- flash插件用作後備方案 -->
    <object width=640 height=480 type="application/x-hockwave-flash" data="flash_movie_player.swf">
        <!-- 這裏的參數配置flash視頻播放器 --->
        <!--  文本用作後備內容 --->
        <div>播放器不支持</div>
    </object>
</video>

Audio構造函數

Audio()構造函數相似Image()函數
例如dom

new Audio("./chime.wav").play();    // 載入並播放聲音效果

這是音頻的api，視頻沒有這個api

類型選擇和加載

使用的是canPlayType進行的
原型爲 HTMLMediaElement.canPlayType()
能播放返回一個真值，不能播放返回一個假值

let a = new Audio();
if (a.canPlayType("audio/wav")) {
    a.src="./soundeffect.wav";
    a.play();   // 進行播放
}

文檔 https://developer.mozilla.org...

控制播放

控制媒體播放使用的是play()和pause()方法用來控制和暫停媒體的播放

// 文檔載入完成後，開始播放背景音樂
window.addEventListener("load", () => {
    document.getElementById("music").play();
}, false);

經過設置urrentTime屬性進行定點播放，
volume表示播放音量
playbackRate表示播放的速度
若是元素擁有controls屬性，會在播放器上顯示控件，讓用戶進行控制播放。
controls表示在瀏覽器中是否顯示控件true爲顯示，false爲隱藏，

查詢媒體狀態

他們有一些只讀的屬性，描述當前的狀態。
播放器暫停，pause屬性值爲true
播放器跳轉到一個新的播放點，seeking的值爲true
若是徹底播放完成，ended爲true
duration媒體時長
initialTime表示媒體的開始時間
等等還有不少，用的時候現查吧，過一遍，大體知道有這些屬性便可

媒體相關事件

會有媒體的相關事件，必須使用addEventListener()方法註冊在audio和video元素上，當被請求的時候觸發，當被加載的時候觸發等等。

下面是svg

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。