专业网站建设_企业品牌营销 · 北京汇仁智杰科技有限公司

Web前端知識

首頁 > 免費 > Web前端知識 >

利用html5制作網頁視頻播放的方法

來源:北京匯仁智杰科技有限公   時間:2016-04-10   點擊:

  利用html5制作網頁視頻播放的方法,現在大多數視頻是通過插件(比如 Flash)來顯示的。然而,并非所有瀏覽器都擁有同樣的插件。

HTML5 規定了一種通過 video 元素來包含視頻的標準方法。

  在HTML5中,video元素目前支持三種格式的視頻文件:

  1.Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件

  2.MPEG4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件

  3.WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件

  那么在HTML5中如何顯示視頻呢?

  先來解釋下video元素中各屬性的含義,其中width、height就不解釋了啊,主要說下controls,顧名思義,controls 就是控件們,視頻的播放、音量暫停等控件。video元素中間插入的漢字,聰明的你一定知道的,是提示用戶瀏覽器不支持視頻格式使用的。

  需要注意的是,要確保適用于Safari 瀏覽器,視頻文件必須是 MP4類型。而ogg格式的視頻則是適用于Firefox、Opera 以及Chrome 瀏覽器。Internet Explorer 8 不支持 video 元素。在 IE 9 中,將提供對使用 MPEG4 的 video 元素的支持。

  當然了,我們如果不確定自己的瀏覽器支持什么格式的視頻,可以先檢測一下,若是不想麻煩,那怎么辦呢?

       video 元素允許多個 source 元素。source 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式,這樣我們只要多準備幾個不同格式的視頻就可以了。

  接下來,介紹幾個video標簽的屬性,

  1.autoplay :出現該屬性意味著視頻在就緒后將自動播放,用法:autoplay="autoplay"

  2.controls :出現該屬性意味著向用戶顯示控件,如播放按鈕等,用法:controls="controls"

  3.height:設置高度

  4.width:設置寬度

  5.loop:自動重播,用法:loop="loop"

  6.preload:視頻在頁面加載時進行加載并預備播放,用法:preload="auto"

  auto - 當頁面加載后載入整個視頻

  me ta - 當頁面加載后只載入元數據

  none - 當頁面加載后不載入視頻

  注意:若使用了autoplay,則忽略preload

  7.src:要播放視頻的url

網絡營銷推廣 . 北京匯仁智杰科技有限公司!

地址:北京市昌平區回龍觀龍冠大廈5層
咨詢:13370157521
業務QQ:373002979
E - mail:sales @ huirenzhijie.com
企業網站備案:京ICP備15021091號-1

匯仁智杰與眾不同

  • 有網絡推廣經驗
  • 有網站建站隊伍
  • 有大型網站建設經驗
  • 致力于營銷型網站建設
  • 始終堅持技術和服務同樣重要
查看PC版網站
備案號:京ICP備15021091號-1 版權所有:匯仁智杰

主站蜘蛛池模板: 洁净室、手术室、实验室、无尘车间厂房的净化工程装修设计施工公司-福临建设 | 徐州电动垃圾车|三轮快速保洁车|电动高压冲洗车|江苏大卫王环保科技有限公司 | 南京空压机出租,发电机租赁,南京牧德田空压机租赁回收公司 | 压力机-压装机-黄油机-黄油泵-[广东品嘉灵]专业定制各种精密压装设备 | 联塑管代理,联塑管厂家批发,中财管总代理,康泰管代理,康泰管厂家批发-邯郸市中枢贸易有限公司 | 制砂机-合金-耐磨锤头-耐磨衬板-铸造件厂家-巩义市豫园宏宇铸造有限公司 | 快达物流:电商和微商的仓储物流外包和托管服务-北京快达国际物流服务有限公司官方网站 | 食品甲醛测定仪,啤酒甲醛测定仪,食盐碘测定仪,食品细菌检验仪,水质细菌检验仪-厦门欣锐仪器仪表有限公司 | 机械智能停车设备_智能机械式立体停车库_立体车库停车设备租赁_山东科博机械车库 | 混凝土修补-清水混凝土保护剂-仿清水混凝土-混凝土装修-混凝土色差处理-混凝土色差修复剂-德州唐荣建筑装饰工程有限公司 | 上海钧尚电器有限公司 - Faulhaber电机 AMETEK pittman电机 AMETEK ROTRON军用航空风机 Exlar电动缸 MAE电机 MCG电机 CP电动工具 马头工具 AMCI驱动器 直流电机 减速箱 直流伺服电机,无刷电机,直线电机 直流防爆电机 防爆电机 汽车助力转向电机 EPS电机 faulhaber motor faulhaber gearbox NANOTEC电机 ELWOOD电机 PHYTRON电机 EXLAR伺服电动缸 高力矩、高性能直流电机,音圈电机,风机,直流风机,航空风机 | 上饶环亚电脑会计培训学校--电脑学校|上饶电脑学校|上饶电脑培训|会计培训|上饶会计培训|上饶县会计培训|广丰会计培训|玉山会计培训|横峰会计培训|上饶网店培训 上进电缆(嘉兴)股份有限公司官网 - 光伏电缆|防火电缆|电力电缆|铝合金电缆专业生产厂家 | 邮政纸箱_淘宝纸箱_抗压纸箱,盐城纸箱,盐城纸箱厂家,盐城承重纸箱-盐城君雅纸箱 | 医用空气净化消毒机,医用床单位消毒机,无磁空气消毒机,紫外线空气消毒机厂家-南昌市扬帆环保设备有限公司 | 煤泥烘干机,酒糟烘干机,药渣烘干机,酵母烘干机,烘干机厂家-瑞奥新能源 | 惠声电子、广州市惠声电子科技有限公司、VBS、VBS惠声电子、VBS公共广播生产厂家、VBS广播功放生产厂家、VBS会议系统设备批发、VBSIP网络对讲系统厂家、VBS会议系统厂家、VBS智能中控厂家、VBS专业扩声厂家 | 视频制作_产品宣传片拍摄_二维动画制作公司-深圳火牛传媒 | 恒温干燥箱厂家-烘箱厂家-马弗炉厂家-生化培养箱-上海有丰科学仪器有限公司 | 苏州温测仪器有限公司-苏州炉温跟踪仪|苏州隔热箱|苏州炉温测试仪|苏州恒温恒湿箱 | 武汉凯美隆窗帘厂家_定做商用窗帘_家用遮阳帘_涵盖电动窗帘_天棚帘_遮阳棚_凯美隆-专注遮阳产品 武汉净化机-武汉全热新风换气机-武汉静音送风机-武汉东信新风节能设备有限公司 | 搅拌摩擦焊-搅拌摩擦焊接机床-搅拌摩擦焊设备厂家-精科大恒 | 建材制品燃烧热值试验仪_建筑材料不燃性试验仪-华阳试验机制造 | 树脂井盖,复合井盖,井盖厂家-山东宝盖新材料 | 欢迎光临广西七三科技有限公司官网 | 无尘投料站-真空上料机-旋振筛|超声波振动筛|摇摆筛|筛分机-新乡市欧霖佳机械有限公司 | 上海搬运公司_上海工厂设备搬迁_大型设备吊装搬运_设备安装公司-桂星装卸搬运 | 济宁三石工程机械有限公司-首页-小型起重机、环卫设备、小松配件 | 兰州钢结构,甘肃铝镁锰板工程,青海岩棉复合板厂家,宁夏岩棉彩钢板公司,西宁彩钢夹芯板-兰州腾达彩钢 | 七评-爱美儿信息科技有限公司〖官网〗? | 制沙机,反击式破碎机,重锤破碎机,泥石分离机,圆锥破碎机厂家-昆明德鑫机械 | 河北省建筑科学研究院有限公司 | 喷淋清洗剂,铝合金清洗剂-青岛爱大生环保科技有限公司 | 扫路车_洗扫车_清扫车_道路清扫车_天锦洗扫车-程力专用汽车股份有限公司 | 煤粉喷枪_高炉喷煤枪_陶瓷喷煤枪-北京耐默公司 | 陶瓷纤维模块|陶瓷纤维毯|陶瓷纤维纸|高温隔热材料|陶瓷纤维厂家-济南火龙热陶瓷有限责任公司 | 苏州交通设施_道路划线_停车场划线_厂区划线_环氧地坪厂家-推荐【飞扬市政交通设施公司】专注交通设施8年! | 履带式移动破碎站-移动筛分站-移动碎石机-破碎机_山东奥凯诺矿机 | 压缩强度测定仪-纸管平压强度测定仪-电脑拉力仪-杭州纸邦自动化技术有限公司 | 山东亮化工程_亮化公司_亮化资质-山东星汇照明工程有限公司 | 铜排,异型紫棒,紫铜棒,紫铜微孔管,异型黄管,黄铜管,异形紫管,紫铜管,焊接铜管,散热器铜管,电力铜管_河间市通海铜业有限公司 | 现代卓越官网-专注于pmp培训证书-pmp考试报名时间-pmp认证-项目管理pmp-ACP敏捷管理-NPDP认证 |