整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          html5 視頻播放防下載的幾種方案盤點(diǎn)

          定義原生播放器控制器功能限制下載

          html5 播放器默認(rèn)是可以下載視頻的,在默認(rèn)的控制器(給 video 標(biāo)簽添加 controls 屬性開(kāi)啟)上會(huì)有下載菜單, 即使不使用默認(rèn)提示的控制器,右鍵彈出的上下文菜單中也會(huì)有保存視頻的選項(xiàng)。



          通過(guò) controlslist 屬性可以設(shè)置瀏覽器提供的控制器,不讓下載菜單顯示出來(lái)。controlslist 還可以設(shè)置不顯示全屏等功能同,但是瀏覽器 支持較差,尤其是移動(dòng)端瀏覽器。

          <video src="test.mp4" playsinline autoplay="false" controls controlslist="nodownload"></video>

          將 controlslist 的值設(shè)置為 nodownload ,就不會(huì)出現(xiàn)下載菜單了,不過(guò) PC 上點(diǎn)擊右鍵的上下文菜單的保存視頻選項(xiàng)仍然有用,還是很容易被下載。

          如果是通過(guò)自定義樣式來(lái)控制播放暫時(shí)等操作的控制條,還可以將 video 禁右鍵或者蒙上一層 div 來(lái)阻止彈出上下文菜單,防止下載。

          利用 Media Source Extensions (MSE) 實(shí)現(xiàn)加密防下載

          雖然通過(guò) controlslist 可以防止下載,但是有些瀏覽器不支持,很多移動(dòng)端的瀏覽器會(huì)直接接管播放器。 如果用戶懂一點(diǎn)技術(shù),捕獲視頻文件的鏈接,就可以直接打開(kāi)鏈接進(jìn)行下載了。 我們可以利用 Media Source Extensions API 來(lái)給文件做加密,這套技術(shù)本來(lái)是用于擴(kuò)展的,通過(guò)擴(kuò)展可以兼容更多 的視頻格式,可以認(rèn)為是前端的一套自定義轉(zhuǎn)碼的接口,將文件實(shí)時(shí)轉(zhuǎn)碼成瀏覽器支持的格式。

          服務(wù)器端做好視頻的加密,將原視頻文件通過(guò)對(duì)稱性加密生成一個(gè)加密新文件,客戶端將加密的新文件加載后進(jìn)行解密, 然后將解密后的原文件內(nèi)容通過(guò) MediaSource 推送,完成視頻的播放。

          <canvas height="240" width="320" id="player" onclick="playOrPause()"></canvas>


          const video = document.getElementById('videoId')
          // 視頻編碼譯碼器,使用工具 mp4info 可以查看
          const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
          
          const mediaSource = new MediaSource()
          video.src = URL.createObjectURL(mediaSource)
          mediaSource.addEventListener('sourceopen', e => {
            const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec)
            // 請(qǐng)求加密文件,然后解密添加到 sourceBuffer,也可以將文件裁切成多個(gè)部分,分多次加載
            fetch('./chunk')
              .then(async resp => {
                const blob = await resp.blob()
                const buf = await blob.arrayBuffer()
                sourceBuffer.addEventListener('updateend', () => {
                  // 如果是多個(gè)文件塊,可以在判定已經(jīng)添加完所有塊后結(jié)束(一般會(huì)搞個(gè)塊列表做比對(duì)的)
                  mediaSource.endOfStream()
                })
                // decode 是自定義的解碼函數(shù),將請(qǐng)求到的加密文件 chunk 內(nèi)容解密成為真正的 mp4 文件
                // ,要與前面的 mimeCodec 對(duì)應(yīng),否則會(huì)有錯(cuò)誤
                // 這個(gè)示例省略了很多錯(cuò)誤處理,要處理錯(cuò)誤需要對(duì) mediaSource 和 sourceBuffer 做 error 事件處理
                sourceBuffer.appendBuffer(decode(buf))
                console.log('appendBuffer after')
              })
              .catch(console.error)
          })

          這樣處理后,通過(guò)控制臺(tái) network 查看到的是加密文件的請(qǐng)求地址,拿到后也不能播放,查看 video 標(biāo)簽源地址是 生成的臨時(shí)地址,也無(wú)法直接打開(kāi)。并且,通過(guò) Media Source Extensions API 還可以實(shí)現(xiàn)視頻分塊做按需加載。 其實(shí) video 標(biāo)簽播放視頻也會(huì)自動(dòng)按需請(qǐng)求內(nèi)容(僅部分瀏覽器),需要服務(wù)器做好對(duì) Range 消息頭的支持,根據(jù)參數(shù)來(lái)返回部分文件內(nèi)容。 不過(guò) Media Source Extensions API 的兼容性不是很好,ie 和 safari 都是不支持的, 新版本 mac 上的 safari 不知道是否能支持。經(jīng)過(guò)測(cè)試,小部分移動(dòng)端瀏覽器也不支持,無(wú)法顯示出視頻,大部分移動(dòng)端瀏覽都可以支持的很好。 有些網(wǎng)站的播放器做了兼容,對(duì)于不支持 MSE 的瀏覽器仍然使用 video 標(biāo)簽播放原 mp4 文件。

          基于 canvas 實(shí)現(xiàn)播放器

          基于 canvas 也是一種方案,好處是不會(huì)被瀏覽器識(shí)別成視頻,也就不會(huì)被接管。很多不太規(guī)范的移動(dòng)端瀏覽器 都是直接接管視頻播放器,自定義的播放器樣式完全沒(méi)用,不會(huì)被顯示出來(lái),使用 canvas 就可以解決這個(gè)問(wèn)題。

          
          const canvas = document.getElementById('player')
          /** @type {CanvasRenderingContext2D} */
          const ctx = canvas.getContext('2d')
          
          const video = document.createElement('video')
          video.addEventListener('canplay', e => {
            // 渲染封面
            this.renderCover()
          })
          fetch('./test.mp4')
            .then(async resp => {
              const blob = await resp.blob()
              video.src = URL.createObjectURL(blob)
            })
            .catch(console.error)
          
          function playOrPause() {
            if (video.ended) {
              return
            }
            if (video.paused) {
              video.play()
              startRender()
            } else {
              video.pause()
            }
          }
          
          function startRender() {
            requestAnimationFrame(() => {
              renderVideo()
              if (!video.paused && !video.ended) {
                startRender()
              }
            })
          }
          
          function renderCover() {
            ctx.clearRect(0, 0, 320, 240)
            ctx.fillStyle = '#000000'
            ctx.fillRect(0, 0, 320, 240)
            ctx.font = '40px Arial'
            ctx.fillStyle = '#ffffff'
            const text = '點(diǎn)擊播放'
            const m = ctx.measureText(text)
            ctx.fillText(text, 320 / 2 - m.width / 2, 240 / 2 + 40 / 2)
          }
          
          function renderVideo() {
            ctx.clearRect(0, 0, 320, 240)
            ctx.drawImage(video, 0, 0, 320, 240)
            if (video.paused) {
              ctx.font = '40px Arial'
              ctx.fillStyle = '#ffffff'
              const text = '已暫停'
              const m = ctx.measureText(text)
              ctx.fillText(text, 320 / 2 - m.width / 2, 240 / 2 + 40 / 2)
            }
          }

          以上僅僅是非常簡(jiǎn)單的 demo,這個(gè)方案真要完善工作量還是挺大的,除操作條和字幕功能外,視頻全屏還需要做一定的重新渲染處理, 有些瀏覽器還不支持全屏 API (requestFullscreen),導(dǎo)致沒(méi)有辦法將視頻全屏展示。 即便如此,也無(wú)法保證百分百不能被下載, 有些瀏覽器還有媒體嗅探功能,當(dāng)請(qǐng)求了媒體文件后,就會(huì)被檢測(cè)到,提示用戶檢測(cè)到有媒體文件, 詢問(wèn)用戶是否要下載。


          經(jīng)過(guò)我對(duì)某個(gè)移動(dòng)端瀏覽器的測(cè)試,改 content-type 和后綴名也不行,只要請(qǐng)求的是視頻文件就會(huì)被檢測(cè)到。 只有把文件加密,請(qǐng)求的是加密文件,不是真正的視頻文件,這樣就不能被檢測(cè)到了,然后客戶端解密后再播放。

          實(shí)測(cè)這個(gè)方案兼容性也不是很好,部分移動(dòng)端瀏覽器會(huì)渲染不出來(lái)視頻內(nèi)容,有些還會(huì)出現(xiàn)卡頓和圖像錯(cuò)亂。不過(guò)微信內(nèi)置 以及火狐等一些較為先進(jìn)的移動(dòng)端瀏覽器支持的都比較好。不過(guò),使用了 canvas 方案就沒(méi)有一些原生功能的支持的,如 小窗播放(畫(huà)中畫(huà)模式)。

          總結(jié)

          經(jīng)過(guò)我的測(cè)試,對(duì) MSE 和 canvas 方案無(wú)法支持的瀏覽器,恰恰是一些以下載視頻為特色的移動(dòng)端瀏覽器, 這些瀏覽器內(nèi)核可能也比較舊,或者是因?yàn)樾薷膬?nèi)核導(dǎo)致的不兼容,不考慮這些瀏覽器 MSE 應(yīng)該是最佳方案, 因?yàn)?MSE 可以實(shí)現(xiàn)按需漸近加載視頻。

          由于視頻本身就非常耗資源,即時(shí)加密對(duì)服務(wù)器要求高,最好是先加密好。 加密必須是對(duì)稱性的,能加密也能解密,通過(guò)破解前端代碼掌握解密方法,仍然有辦法解開(kāi)視頻內(nèi)容。 如果視頻是提前加密好再存儲(chǔ)的,也不好去搞動(dòng)態(tài)密鑰。

          html5 視頻播放器想要下載并做好兼容是非常困難的,基本上不太可能。有些對(duì)版權(quán)保護(hù)比較嚴(yán)格的網(wǎng)站,采取了 只能使用客戶端看視頻的方案,體驗(yàn)上就差一些了。比如 cctalk 這個(gè)平臺(tái),視頻作者可以設(shè)置保護(hù),對(duì)于需要保護(hù)的 視頻只能通過(guò)客戶端觀看,其它的視頻仍然可以網(wǎng)頁(yè)上直接播放。

          希望可以通過(guò)這篇文章,能夠給你得到幫助。(感謝一鍵三連)

          學(xué)習(xí)深入理解HTML5audiovideo

          HTML5視頻概述

          HTML5播放一個(gè)視頻,很簡(jiǎn)單,只需要一行代碼:

          <video src="resources/dadaqianduan.mp4" autoplay></video>

          了解多媒體術(shù)語(yǔ)

          了解視頻文件格式:

          Audio Video InterLeaved .avi
          
          Flash Video .flv
          
          MPEG-4 .mp4
          
          Matroska .mkv
          
          Ogg .ogv

          音頻和視頻編解碼器

          編解碼器可以理解為一些算法代碼,用于處理視頻,音頻或者其元數(shù)據(jù)的編碼格式。對(duì)音頻或視頻文件進(jìn)行編碼,可使得文件大大縮小,便于在因特網(wǎng)上傳輸。

          音頻編解碼器:

          MP3,使用ACC音頻

          Wav,使用Wav音頻

          Ogg,使用OggVorbis音頻

          視頻編解碼器:

          MP4,使用H.264視頻,AAC音頻

          WebM,使用VP8視頻,OggVorbis音頻

          Ogg,使用Theora視頻,OggVorbis音頻

          多媒體文件格式

          audio元素支持的音頻格式MP3,Wav,Oggvideo元素支持的格式MP4,WebM,Ogg

          • audio元素是專門用于在網(wǎng)頁(yè)中播放網(wǎng)絡(luò)音頻的
          • video元素是專門用于在網(wǎng)頁(yè)中播放視頻的

          HTML5audiovideo元素提供的接口包含了一系列的屬性,方法和事件,這些接口可以幫助開(kāi)發(fā)完成對(duì)音頻和視頻的操作。

          那么如何在頁(yè)面中添加音頻和視頻呢?

          音頻

          <audio src="resources/audio.mp3">
          </audio>

          視頻

          <video src="resources/video.mp4" width="600" height="200">
          </video>

          使用source元素

          因?yàn)楦鞣N瀏覽器對(duì)音頻和視頻的編解碼器的支持不一樣,為了能夠在各種瀏覽器中正常使用,可以提供多個(gè)源文件。

          <audio src="resources/audio.mp3">
           <source src="song.ogg" type="audio/ogg">
           <source src="song.mp3" type="audio/mpeg">
          </audio>
          <video src="resources/video.mp4" width="600" height="200" controls>
           <source src="movie.ogg" type="video/ogg codes=`theora,vorbis` ">
           <source src="movie.mp4" type="video/mp4">
          </video>

          使用source元素替代了audiovideo的標(biāo)簽屬性src

          1. src屬性用于指定媒體文件的url地址
          2. type屬性用于指定媒體文件的類型,屬性值為媒體文件的MIME類型,該屬性值還可以通過(guò)codes參數(shù)指定編碼格式

          audiovideo特性和屬性

          元素的標(biāo)簽特性

          1. src,源文件特性,用于指定媒體文件的url地址
          2. autoplay,自動(dòng)播放特性,表示媒體文件加載后自動(dòng)播放。
          <video src="resources/video.mp4" autoplay></video>
          1. controls,控制條特性,表示為視頻或音頻添加自帶的播放控制條。
          <video src="resources/video.mp4" controls></video>
          1. loop,循環(huán)特性,表示音頻或視頻循環(huán)播放。
          <video src="resources/video.mp4" controls loop></video>
          1. preload,預(yù)加載特性,表示頁(yè)面加載完成后如何加載視頻數(shù)據(jù)。
          • none表示不進(jìn)行預(yù)加載
          • metadata表示只加載媒體文件的元數(shù)據(jù)
          • auto表示加載全部視頻或音頻,默認(rèn)值為auto
          <video src="resources/video.mp4" controls preload="auto"></video>
          1. postervideo元素獨(dú)有的特性,替代內(nèi)容屬性,用于指定一副替代圖片的url地址,當(dāng)視頻不可以用時(shí),會(huì)顯示該替代圖片。
          <video src="resources/video.mp4" controls poster="images/none.jpg"</video>
          1. widthheightvideo元素獨(dú)有的特性,用于指定視頻的寬度和高度
          <video src="resources/video.mp4" width="600" height="200" controls></video>

          接口屬性

          1. currentSrc,只讀,獲取當(dāng)前正在播放或已加載的媒體文件的url地址
          2. videoWidth,只讀,video元素特有屬性,獲取視頻原始的寬度
          3. videoHeight,只讀,video元素特有屬性,獲取視頻原始的高度
          4. currentTime,獲取或設(shè)置當(dāng)前媒體播放位置的時(shí)間點(diǎn)
          5. startTime,只讀,獲取當(dāng)前媒體播放的開(kāi)始時(shí)間
          6. duration,只讀,獲取整個(gè)媒體文件的播放時(shí)長(zhǎng)
          7. volume,獲取或設(shè)置媒體文件播放時(shí)的音量,取值范圍在0.00.1之間
          8. muted,獲取或設(shè)置媒體文件播放時(shí)是否靜音。true表示靜音,false表示消除靜音
          9. ended,只讀,如果媒體文件已經(jīng)播放完畢則返回true,否則返回false
          10. error,只讀,讀取媒體文件的錯(cuò)誤代碼
          11. played,只讀,獲取已播放媒體的TimesRanges對(duì)象,該對(duì)象內(nèi)容包括已播放部分的開(kāi)始時(shí)間和結(jié)束時(shí)間。
          12. paused,只讀,如果媒體文件當(dāng)前是暫停或未播放則返回true,否則返回false
          13. seeking,只讀,獲取瀏覽器是否正在請(qǐng)求媒體數(shù)據(jù)
          14. seekable,只讀,獲取媒體資源已請(qǐng)求的TimesRanges對(duì)象,該對(duì)象內(nèi)容包括已請(qǐng)求部分的開(kāi)始時(shí)間和結(jié)束時(shí)間
          15. networkState,只讀,獲取媒體資源的加載狀態(tài)
          16. buffered,只讀,獲取本地緩存的媒體數(shù)據(jù)的TimesRanges對(duì)象
          17. readyState,只讀,獲取當(dāng)前媒體播放的就緒狀態(tài)
          18. playbackRate,獲取或設(shè)置媒體當(dāng)前的播放速率
          19. defaultPlaybackRate,獲取或設(shè)置媒體默認(rèn)的播放速率

          視頻播放的快進(jìn)

          <!DOCTYPEHTML>
          <html>
          <head>
          <meta charset="utf-8">
          <title>視頻播放時(shí)的快進(jìn)</title>
          <script type="text/javascript">
          function Forward() {
           var el = document.getElementById("myPlayer");
           var time = el.currentTime;
           el.currentTime = time+300;
          }
          </script>
          </head>
          <body>
          <video id="myPlayer" src="resources/video.mp4" width="600" height="200" controls>
          </video>
          <br/>
          <input type="button" value="快進(jìn)" onclick="Forward()"/>
          </body>
          </html>

          audiovideo接口方法

          接口方法

          1. load(),加載媒體文件,為播放做準(zhǔn)備。
          2. play(),播放媒體文件。
          3. pause(),暫停播放媒體文件。
          4. canPlayType(),測(cè)試瀏覽器是否支持指定的媒體類型。

          代碼示例使用接口:

          <!DOCTYPEHTML>
          <html>
          <head>
          <meta charset="utf-8">
          <title>播放與暫停</title>
          <script type="text/javascript">
          var videoEl = null;
          function Play() {
           videoEl.play();
          }
          function Pause() {
           videoEl.pause();
          }
          window.onload = function(){
           videoEl = document..getElementById("myPlayer");
          }
          </script>
          </head>
          <body>
          <video id="myPlayer" width="600">
           <source src="resources/video.mp4" type="video/mp4">
          </video><br>
          <input type="button" value="播放" onclick="Play()"/>
          <input type="button" value="暫停" onclick="Pause()"/>
          </body>
          </html>

          audiovideo事件

          捕獲事件的方式

          捕獲事件有兩種方法:一種是添加事件句柄,一種是監(jiān)聽(tīng)。

          <video id="myPlayer" src="resources/video.mp4" width="500" onplay="video_playing()">
          </video>
          
          // 監(jiān)聽(tīng)方式
          var videoEl = document.getElementById("myPlayer");
          videoEl.addEventListener("play",video_playing);

          接口事件

          1. play,當(dāng)執(zhí)行方法play()時(shí)觸發(fā)
          2. playing,正在播放時(shí)觸發(fā)
          3. pause,當(dāng)執(zhí)行了方法pause()時(shí)觸發(fā)
          4. timeupdate,當(dāng)播放位置被改變時(shí)觸發(fā)
          5. ended,當(dāng)播放結(jié)束后停止播放時(shí)觸發(fā)
          6. waiting,在等待加載下一幀時(shí)觸發(fā)
          7. ratechange,在當(dāng)前播放速率改變時(shí)觸發(fā)
          8. volumechange,在音量改變時(shí)觸發(fā)
          9. canplay,以當(dāng)前播放速率需要緩沖時(shí)觸發(fā)
          10. canplaythrough,以當(dāng)前播放速率不需要緩沖時(shí)觸發(fā)
          11. durationchange,當(dāng)播放時(shí)長(zhǎng)改變時(shí)觸發(fā)
          12. loadstart,當(dāng)瀏覽器開(kāi)始在網(wǎng)上尋找數(shù)據(jù)時(shí)觸發(fā)
          13. progress,當(dāng)瀏覽器正在獲取媒體文件時(shí)觸發(fā)
          14. suspend,當(dāng)瀏覽器暫停獲取媒體文件,且文件獲取并不是正常結(jié)束時(shí)觸發(fā)
          15. abort,當(dāng)終止獲取媒體數(shù)據(jù)時(shí)觸發(fā)
          16. error,在獲取媒體過(guò)程中出錯(cuò)時(shí)觸發(fā)
          17. emptied,當(dāng)所在網(wǎng)絡(luò)變?yōu)槌跏蓟癄顟B(tài)時(shí)觸發(fā)
          18. stalled,在瀏覽器嘗試獲取媒體數(shù)據(jù)失敗時(shí)觸發(fā)
          19. seeking,在瀏覽器正在請(qǐng)求數(shù)據(jù)時(shí)觸發(fā)
          20. seeded,在瀏覽器停止請(qǐng)求數(shù)據(jù)時(shí)觸發(fā)

          定義全局的視頻對(duì)象

          代碼如下:

          <script type="text/javascript">
          // 定義全局視頻對(duì)象
          var videoEl = null;
          // 網(wǎng)頁(yè)加載完畢后,讀取視頻對(duì)象
          window.addEventListener("load", function() {
           videoEl = document.getElementById("myPlayer")
          });
          </script>

          添加進(jìn)度顯示功能

          代碼如下:

          <script type="text/javascript">
          function Progress() {
           var el = document.getElementById("progress");
           el.style.width = (videoEl.currentTime/videoEl.duration)*720 + "px"
           document.getElementById("info").innerHTML = s2time(videoEl.currentTime) + "/" + s2time(videoEl.duration);
          }
          
          function s2time(s) {
           var m = parseFloat(s/60).toFixed(0);
           s = parseFloat(s%60).toFixed(0);
           return (m<10?"0"+m:m)+":"+(s<10?"0"+s:s);
          }
          window.addEventListener("load",function(){videoEl.addEventListener("timeupdate",Progress)});
          window.addEventListener("load",Progress)

          添加靜音和調(diào)節(jié)音量的功能

          消除靜音videoEl.muted=false;靜音效果videoEl.muted=truevideoEl.volume=e.value;修改音量的值。

          添加慢進(jìn)和快進(jìn)功能

          天小編將分享前端開(kāi)發(fā)中必學(xué)的知識(shí)點(diǎn),HTML5中關(guān)于音視頻處理

          視頻處理

          基本內(nèi)容:目前國(guó)內(nèi)的視頻網(wǎng)站 - Flash技術(shù),HTML5的視頻處理首先替換Flash技術(shù),支持的視頻格式有:

          1.MP4 - .mp4 目前比較主流的視頻格式。

          2.OGG - .ogv 手機(jī)端的視頻格式。

          3.WebM - 目前唯一一個(gè)支持超高清視頻格式,該視頻格式出自Goggle公司。

          問(wèn): 如何處理視頻?

          答:<video>元素 - 引入單個(gè)格式視頻文件,它由自己的屬性組成。 src屬性 - 指定視頻文件的地址, width屬性 - 設(shè)置視頻寬度, height屬性 - 設(shè)置視頻高度。語(yǔ)法規(guī)范:<video src="視頻文件路徑" width=“100px”>

          !!需要注意的是:視頻的寬高比不會(huì)改變, 在video元素內(nèi)定義不支持的提示內(nèi)容。

          如果要想在<video>元素引入多個(gè)格式視頻文件,那么就使用<source/>,使用這種方式能夠?qū)崿F(xiàn)各個(gè)瀏覽器的兼容性,語(yǔ)法規(guī)范:

          <video>

          <source src="視頻文件路徑1"/>

          <source src="視頻文件路徑2"/>

          <source src="視頻文件路徑3"/>

          </video>

          • <video>元素的屬性

          autoplay屬性 - 自動(dòng)播放

          controls屬性 - 提供控制面板

          loop屬性 - 循環(huán)播放

          poster屬性 - 播放之前顯示一張圖片

          preload屬性 - 預(yù)加載(視頻)

          none - 不加載

          auto - (默認(rèn)值)自動(dòng)(盡快加載完畢)

          metadata - 只加載除視頻之外的信息(寬和高)

          • video的高級(jí)用法 方法

          play() - 播放視頻

          pause() - 暫停視頻

          load() - 加載視頻

          canPlayType() - 判斷是否支持該格式

          • 事件

          play - 播放視頻時(shí)觸發(fā)

          pause - 暫停視頻時(shí)觸發(fā)

          ended - 結(jié)束播放時(shí)觸發(fā)

          error - 播放錯(cuò)誤時(shí)觸發(fā)

          canplay - 可播放時(shí)觸發(fā)(不考慮整體)

          canplaythrough - 整體播放順利時(shí)觸發(fā)

          progress - 下載進(jìn)度

          • 屬性

          paused - 判斷視頻當(dāng)前是否暫停,如果暫停狀態(tài),返回true

          ended - 判斷視頻當(dāng)前是否結(jié)束播放,如果結(jié)束播放,返回true

          duration - 當(dāng)前視頻的總時(shí)長(zhǎng)

          currentTime - 獲取或設(shè)置當(dāng)前視頻播放的位置

          音頻處理

          基本內(nèi)容:目前HTML頁(yè)面實(shí)現(xiàn)音頻處理,將Windows Media Player播放器,內(nèi)置頁(yè)面中,使用Flash技術(shù)實(shí)現(xiàn)音頻處理,HTML5實(shí)現(xiàn)音頻處理支持的音頻格式有:

          1.mp3 - 感謝百度(MP3)

          2.ogg

          3.wav

          問(wèn): 如何使用音頻?

          答: audio元素 - 引入一種音頻格式。

          • <audio>元素的屬性

          src屬性 - 引入音頻文件,作用 - 實(shí)現(xiàn)頁(yè)面背景音樂(lè)播放

          audio元素 - 引入多種音頻格式

          source元素

          autoplay - 自動(dòng)播放

          controls - 提供控制面板

          loop - 循環(huán)播放

          preload - 預(yù)加載

          audio的高級(jí)用法

          • 事件

          play - 播放音頻時(shí)觸發(fā)

          • 方法

          play() - 播放音頻

          pause() - 暫停音頻

          • 屬性

          paused - true,表示暫停狀態(tài)

          !! 需要特別注意,IE 8及之前的版本都不支持


          主站蜘蛛池模板: 国产小仙女视频一区二区三区| 中文字幕一区二区免费| 国产成人综合一区精品| 国产乱码伦精品一区二区三区麻豆 | 国产乱人伦精品一区二区在线观看| 国产激情一区二区三区成人91| 99无码人妻一区二区三区免费| 亚洲一区二区三区偷拍女厕| 日本一区二区三区不卡视频中文字幕| 麻豆一区二区在我观看| 香蕉久久av一区二区三区| 国产精品毛片a∨一区二区三区| 国产精品538一区二区在线| 亚洲综合av一区二区三区| 2022年亚洲午夜一区二区福利 | 国产精品被窝福利一区 | 人体内射精一区二区三区| 人妻少妇AV无码一区二区| 东京热无码av一区二区| 日本一区二区三区高清| 免费无码一区二区三区蜜桃| 中文字幕精品一区二区精品| 国产色情一区二区三区在线播放 | 99久久无码一区人妻a黑| 日韩精品无码免费一区二区三区| 久久精品亚洲一区二区| 精品无码国产一区二区三区AV | 免费观看一区二区三区| 色老板在线视频一区二区| 国产一区二区精品久久| 无码少妇一区二区| 久久精品免费一区二区| 99久久精品午夜一区二区| 国产精品无码一区二区三区毛片| 久久青青草原一区二区| 无码日韩精品一区二区人妻| 国产精品亚洲产品一区二区三区| 中文字幕一区二区三区四区| 亚洲av综合av一区| 无码人妻aⅴ一区二区三区| 精品一区二区三区四区电影|