如何在網頁中添加視訊？怎樣在網頁中添加視訊

在網頁中添加視訊的方法今天終于實作了，為了能讓那些需要在網頁中自由播放自己的視訊的朋友收到這個文章，我把标題寫的長了點。首先說一下需求，在之前做的一個靜态頁面中，要加入一個視訊，要求自動播放，還要能暫停，有播放進度的功能，但是在百度上很久，一直沒有找到這個問題，可能自己太笨了，後來，沒有辦法，就引用了優酷的連接配接，但是這樣在去掉廣告的情況下，還是經常、偶爾會出現廣告，這個很讓人火大，因為本身自己就是廣告，優酷在放30秒，基本人家已經跳出這個網頁了，今天終于在别人的網頁中看到了一段代碼，于是一搜，找到了這個東西jw

player，一款網頁播放器，支援免費和付費，支援大多視訊格式，因為是英文的文檔，沒有仔細去研究，就發一下個人簡單的用法，基本上已經滿足80%的使用者。以下是我的操作方法：

1，http://www.jwplayer.com/sign-up/　　　　官方下載下傳位址，輸入你的郵箱，擷取登陸密碼，進行下載下傳，獲得一個壓縮包

我已經下載下傳過了，如果大家懶得去下載下傳，大家可以通過這個連接配接下載下傳：files.cnblogs.com/geek12/jwplayer-6.8.zip

2，官方有英文的文檔，這個是連接配接大家可以自己去了解： http://support.jwplayer.com/ 如果有中文的，要告訴我哦

那個壓縮包裡面，有這麼幾個檔案，下面是截圖：

第一個swf結尾的，應該是播放器，第二個應該是html5播放器，第三個是相容大多浏覽器，最後一個是簡單的例子使用

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<code>&lt;!DOCTYPE html PUBLIC</code><code>"-//W3C//DTD XHTML 1.0 Transitional//EN"</code>

<code>""</code><code>&gt;</code>

<code>&lt;html xmlns=</code><code>""</code>

<code>xml:lang=</code><code>"zh-cn"</code><code>&gt;</code>

<code>&lt;head&gt;</code>

<code>    </code><code>&lt;meta http-equiv=</code><code>"Content-Type"</code>

<code>content=</code><code>"text/html;charset=UTF-8"</code>

<code>/&gt;</code>

<code>    </code><code>&lt;title&gt;網頁嵌入視訊&lt;/title&gt;</code>

<code>    </code><code>&lt;meta name=</code><code>"keywords"</code>

<code>content=</code><code>""</code> <code>/&gt;</code>

<code>    </code><code>&lt;meta name=</code><code>"description"</code>

<code>    </code><code>&lt;link rel=</code><code>"stylesheet"</code>

<code>type=</code><code>"text/css"</code>

<code>href=</code><code>""</code> <code>/&gt;</code>

<code>    </code><code>&lt;style type=</code><code>"text/css"</code><code>&gt;&lt;/style&gt;</code>

<code>    </code><code>&lt;!--下面是引入重要部分--&gt;</code>

<code>    </code><code>&lt;script type=</code><code>"text/javascript"</code>

<code>src=</code><code>"./jwplayer/jwplayer.js"</code><code>&gt;&lt;/script&gt;</code>

<code>&lt;/head&gt;</code>

<code>&lt;body&gt;</code>

<code>&lt;div id=</code><code>"myElement"</code><code>&gt;&lt;/div&gt;</code>

<code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;</code>

<code>    </code><code>jwplayer(</code><code>"myElement"</code><code>).setup({</code>

<code>    </code><code>flashplayer:</code><code>"/jwplayer/jwplayer.flash.swf"</code><code>,</code><code>// 引入播放器</code>

<code>        </code><code>file:</code><code>"/shipin.flv"</code><code>,   </code><code>// 引入視訊位址</code>

<code>         </code><code>image:</code><code>"/pic.jpg"</code><code>,</code><code>// 視訊播放前的顯示圖檔，主要用于美觀，你可以試一試</code>

<code>         </code><code>autostart:true,   </code><code>//true表示自動播放</code>

<code>         </code><code>height:360,   </code><code>// 視訊的高</code>

<code>         </code><code>width:640,    </code><code>// 視訊的寬，jwplayer預設寬和高是640*360，可以自己設定</code>

<code>    </code><code>});</code>

<code>&lt;/script&gt;</code>

<code>&lt;/body&gt;</code>

<code>&lt;/html&gt;</code>

上面是一個完整的代碼，裡面都有注釋，基本上已經滿足大多數人的使用。

在用圖檔作為視訊封面的情況下，圖檔一直不能占到視訊的100%，兩邊有留黑的解決辦法：不要使用封面圖檔大小和視訊大小不一樣，

圖檔必須和你的寬高一樣，這樣視訊封面的圖檔将會占用100%，很漂亮。

第一次寫這個，寫了将近一個小時，如果大家覺得不錯的，請拿去使用，如果還有什麼疑問和不了解的，請留言哦，我每天都會來寫一些東西，希望能幫助到那些需要的人。。。