HTML5多媒體組件的使用——第三部分:自定義控件

發布時間:2017-04-12 06:51 來源:互聯網 當前欄目:網頁設計教程

這是關于HTML5的系列教程的第三部分(共3部分)。在第一部分和第二部分,講到了 video 和 audio 元素,簡短的展示了如何給這些元素添加 controls 屬性,以此來給瀏覽器的媒體(media)元素設置默認值。如果已試過,那應該注意到了各個瀏覽器的默認外觀并不一樣。

如果你希望你的媒體元素在各瀏覽器下有相同的樣式,就可以使用HTML5媒體元素的方便的API。你可以使用標準的HTML和CSS來控制媒體的外觀, 并用 media元素的API來控制 audio 和 video 元素。

 

此篇教程詳細的描述了構建一個自定義媒體播放器的各個步驟,添加一些特點和功能,使用不同的API屬性,事件和方法。你可以先看看這個案例 的最終結果,在此文章的示例附件中(見原文章地址中)。

注意:這篇教程使用了視頻元素,但是音頻的處理也是同理可得的。

 

開始

 

第一步,就是先定義一個video元素。

 

  • 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、
  • 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、