• <sub id="xcyjv"></sub><nav id="xcyjv"><code id="xcyjv"><meter id="xcyjv"></meter></code></nav>
      <nav id="xcyjv"></nav>
    1. <form id="xcyjv"><th id="xcyjv"></th></form><nav id="xcyjv"><mark id="xcyjv"></mark></nav>

        Html5實現首頁動態視頻背景的示例代碼

          發布時間:2019-09-25 16:15:56   作者:有夢想的咸魚前端   我要評論
        這篇文章主要介紹了Html5實現首頁動態視頻背景的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

        話不多說,先看效果圖:

        炫酷嗎?你想實現這種動態視頻作為背景的首頁嗎?來,一起來學習,本文將帶你一起實現H5動態視頻背景;

        首先網上找一段清晰的視頻下載下來,最好是MP4格式的;

        下載好了之后我們新建一個html文件來寫代碼:

        html代碼:

        <video id="v1" autoplay loop muted>
                      <source src="./video2.mp4" type="video/mp4"  />
                </video>

        一個video標簽包裹著,source代表來源文件,autoplay屬性是自動播放,loop代表循環播放,muted代表無聲播放;

        如果不加入autoplay屬性是無法自動播放的,頁面將會黑屏展示;

        css代碼:

         *{  
                    margin: 0px;  
                    padding: 0px;  
                }  
                video{  
                    position: fixed;  
                    right: 0px;  
                    bottom: 0px;  
                    min-width: 100%;  
                    min-height: 100%;  
                    height: auto;  
                    width: auto;  
                    /*加濾鏡*/
                    /*filter: blur(15px); //背景模糊設置 */
                    /*-webkit-filter: grayscale(100%);*/  
                    /*filter:grayscale(100%); //背景灰度設置*/  
                    z-index:-11
                }  
                source{  
                    min-width: 100%;  
                    min-height: 100%;  
                    height: auto;  
                    width: auto;  
                } 

        css代碼主要是進行定位和放大達到全屏播放的效果,主要是對video進行寬高之類的設置,還有別忘了要給z-index給個值,讓放置在底部,只要小于0都可以,沒有影響;

        就這樣我們的動態視頻背景就完成了,如果想設置播放速度,我們可以添加js代碼(video標簽加上id=“v1”屬性):

         var video= document.getElementById('v1');
                    video.playbackRate = 1.5;

        那么如果我們想要添加內容到頁面上怎么辦呢?

            <video id="v1" autoplay loop muted>
                      <source src="./video2.mp4" type="video/mp4"  />
                </video>    
                <h1 style="color:white">123465</h1>

        是的,在video標簽外部添加,然后我們的效果圖就是這樣的(由于博客對圖片大小有限制,所以截屏時間沒有很長):

         

        是不是用H5實現這種動態視頻背景效果很簡單?趕緊一起來試試吧。!

        以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

        相關文章

        • HTML5輕松實現全屏視頻背景的示例

          這篇文章主要介紹了HTML5輕松實現全屏視頻背景的示例的相關資料,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
          2018-04-23

        最新評論

        01彩票网app
      1. <sub id="xcyjv"></sub><nav id="xcyjv"><code id="xcyjv"><meter id="xcyjv"></meter></code></nav>
          <nav id="xcyjv"></nav>
        1. <form id="xcyjv"><th id="xcyjv"></th></form><nav id="xcyjv"><mark id="xcyjv"></mark></nav>
            项城 | 甘南 | 鄢陵 | 泗洪 | 黄冈 | 清远 | 济源 | 吴忠 | 玉溪 | 常德 | 遵义 | 克孜勒苏 | 营口 | 延安 | 儋州 | 乐平 | 琼中 | 南阳 | 改则 | 澳门澳门 | 邵阳 | 琼海 | 安岳 | 铜川 | 德州 | 黔西南 | 咸宁 | 唐山 | 海东 | 平潭 | 乐清 | 公主岭 | 徐州 | 湘西 | 乐山 | 金华 | 克孜勒苏 | 邹平 | 衡水 | 昆山 | 高雄 | 巴音郭楞 | 牡丹江 | 汝州 | 崇左 | 日喀则 | 锡林郭勒 | 巴彦淖尔市 | 聊城 | 甘肃兰州 | 朔州 | 吉林 | 西双版纳 | 内江 | 佛山 | 通辽 | 钦州 | 新疆乌鲁木齐 | 广州 | 石狮 | 海拉尔 | 济南 | 燕郊 | 济宁 | 株洲 | 灌云 | 赤峰 | 德阳 | 庆阳 | 吴忠 | 佛山 | 鸡西 | 石嘴山 | 吴忠 | 天水 | 仙桃 | 广西南宁 | 梅州 | 长垣 | 灌云 | 锡林郭勒 | 西藏拉萨 | 山东青岛 | 内江 | 台南 | 永新 | 广安 | 南安 | 海西 | 自贡 | 遵义 | 伊犁 | 黄冈 | 黑龙江哈尔滨 | 阿拉善盟 | 普洱 | 喀什 | 梅州 | 芜湖 | 靖江 | 曹县 | 海南海口 | 鄂尔多斯 | 东海 | 临汾 | 漳州 | 柳州 | 临海 | 河源 | 抚顺 | 吕梁 | 广西南宁 | 招远 | 咸阳 | 云浮 | 河源 | 湛江 | 江西南昌 | 西藏拉萨 | 山东青岛 | 瑞安 | 福建福州 | 广汉 | 河池 | 长葛 | 武安 | 保山 | 鄂州 | 丹阳 | 日照 | 西双版纳 | 锦州 | 信阳 | 济源 | 改则 | 嘉善 | 惠州 | 内蒙古呼和浩特 | 温州 | 广西南宁 | 吐鲁番 | 长葛 | 泰州 | 济南 | 三门峡 | 定安 | 黄南 | 江西南昌 | 海门 | 廊坊 | 儋州 | 朝阳 | 灵宝 | 东营 | 宁国 | 曹县 | 大丰 | 巢湖 | 林芝 | 阳泉 | 兴安盟 | 黔南 | 石嘴山 | 延安 | 阿里 | 中山 | 西双版纳 | 攀枝花 | 兴安盟 | 岳阳 | 澄迈 | 攀枝花 | 曲靖 | 仁怀 | 鹤壁 | 诸城 | 许昌 | 芜湖 | 那曲 | 兴安盟 | 神木 | 庄河 | 通辽 | 珠海 | 铜陵 | 嘉兴 | 文山 | 铜陵 | 哈密 | 永州 | 张家口 | 陇南 | 博尔塔拉 | 抚顺 | 崇左 | 定西 | 三明 | 雄安新区 | 六安 | 深圳 | 澳门澳门 | 日喀则 | 吉安 | 金昌 | 四川成都 | 安康 | 改则 | 铜仁 | 威海 | 达州 | 鹤岗 | 乌兰察布 | 厦门 | 铜仁 | 吉林 | 佳木斯 | 大连 | 钦州 | 永州 | 常德 | 青州 | 本溪 | 福建福州 | 乐山 | 海安 | 郴州 | 延安 | 德清 | 图木舒克 | 馆陶 | 白山 | 台湾台湾 | 桂林 | 汝州 | 和县 | 项城 | 绥化 | 浙江杭州 | 泰安 | 江西南昌 | 枣阳 | 白山 | 琼海 | 佛山 | 吉林长春 | 鹤壁 | 临沂 | 黄山 | 西双版纳 | 包头 | 琼中 | 巴中 | 朝阳 | 余姚 | 茂名 | 日照 | 台湾台湾 | 河南郑州 | 阿里 | 漳州 | 启东 | 琼中 | 葫芦岛 | 开封 | 焦作 | 曹县 | 晋江 | 商丘 | 云南昆明 | 佛山 | 邹平 | 沭阳 | 徐州 | 蚌埠 | 象山 | 株洲 | 那曲 | 贵州贵阳 | 溧阳 | 大连 | 济源 | 长兴 | 安庆 | 灌南 | 馆陶 | 濮阳 | 福建福州 | 株洲 | 池州 | 红河 | 唐山 | 淄博 | 乌兰察布 | 瑞安 | 龙口 | 滕州 | 杞县 | 怀化 | 诸城 | 毕节 | 邵阳 | 乌海 | 长葛 | 阿克苏 | 南阳 | 汝州 | 钦州 | 临汾 | 和县 | 广元 | 潜江 | 伊犁 | 鹤壁 | 偃师 | 安顺 | 海南海口 | 曹县 | 海西 | 涿州 | 库尔勒 | 阜新 | 神木 | 石河子 | 菏泽 | 岳阳 | 阜新 | 基隆 | 昭通 | 庆阳 | 昆山 | 池州 | 汉中 | 黑龙江哈尔滨 | 慈溪 | 宝应县 | 东营 | 陇南 | 德宏 | 焦作 | 山南 | 固原 | 平潭 | 中山 | 普洱 | 包头 | 毕节 | 溧阳 | 来宾 | 中山 | 乐平 | 桓台 | 迁安市 | 建湖 | 承德 | 衢州 | 白沙 | 漳州 | 醴陵 | 乌海 | 瓦房店 | 安吉 | 邹平 | 莱芜 | 焦作 | 清远 | 邹城 | 吉安 | 简阳 | 甘孜 | 天水 | 朝阳 | 湛江 | 漯河 | 雄安新区 | 五家渠 | 咸阳 | 秦皇岛 | 泗洪 | 保定 | 陇南 | 东营 | 灌云 | 滕州 | 百色 | 丽水 | 楚雄 | 泰安 | 乌海 | 黑龙江哈尔滨 | 西藏拉萨 | 武夷山 | 桐城 | 新余 | 洛阳 | 三明 | 克拉玛依 | 肇庆 | 包头 | 新余 | 喀什 | 项城 | 靖江 | 潜江 | 嘉峪关 | 金华 | 铜川 | 白沙 | 通化 | 灵宝 | 台州 | 仁寿 | 平顶山 | 商丘 | 济南 | 嘉兴 | 福建福州 | 龙口 | 大丰 | 定西 | 和田 | 黄冈 | 资阳 | 三门峡 | 朝阳 | 五家渠 | 运城 | 鞍山 | 克孜勒苏 | 日土 | 灵宝 | 鹤岗 | 山东青岛 | 德清 | 宜昌 | 榆林 | 单县 | 三亚 | 盐城 | 湖州 | 五家渠 | 莱州 | 洛阳 | 岳阳 | 雄安新区 | 海宁 | 遵义 | 连云港 | 嘉峪关 | 南通 | 延边 | 文山 | 武威 | 梅州 | 曹县 | 西双版纳 | 三门峡 | 自贡 | 诸城 | 海安 | 白山 | 贵州贵阳 | 衢州 | 乌海 | 葫芦岛 | 抚州 | 塔城 | 澳门澳门 | 咸阳 | 德宏 | 本溪 | 庆阳 | 兴安盟 | 建湖 | 贵港 | 昆山 | 黔南 | 扬中 | 张家界 | 常州 | 长治 | 遂宁 | 林芝 | 吉林 | 滨州 | 宜昌 | 宁国 | 阿拉尔 | 果洛 | 启东 | 扬中 | 瓦房店 | 桂林 | 湘西 | 上饶 | 天水 | 绥化 | 娄底 | 甘肃兰州 | 南京 | 广汉 | 肇庆 | 海宁 | 景德镇 | 石狮 | 昭通 | 锡林郭勒 | 鄂尔多斯 | 佳木斯 | 怒江 | 桐乡 | 澳门澳门 | 清徐 | 临沧 | 克孜勒苏 | 桐乡 | 北海 | 衡阳 | 蚌埠 | 永州 | 濮阳 | 昌吉 | 武威 | 大连 | 南阳 | 顺德 | 安阳 | 仁怀 | 常州 | 贺州 | 红河 | 公主岭 | 台中 | 黑河 | 安吉 | 中卫 | 张北 | 深圳 | 泗阳 | 龙口 | 南阳 | 阿克苏 | 双鸭山 | 改则 | 克拉玛依 | 凉山 | 柳州 | 本溪 | 金坛 | 武夷山 | 库尔勒 | 鄂州 | 锡林郭勒 | 抚州 | 沭阳 | 雄安新区 | 白沙 | 洛阳 | 吐鲁番 | 海安 | 姜堰 | 湘潭 | 灌南 | 定安 | 邵阳 | 衡阳 | 来宾 | 安徽合肥 | 安阳 | 甘南 | 定西 | 基隆 | 毕节 | 白城 | 中山 | 阳春 | 乌兰察布 | 三明 | 阿拉善盟 | 钦州 | 鸡西 | 牡丹江 | 资阳 | 海西 | 鄂州 | 塔城 | 山西太原 | 莱芜 | 广西南宁 | 兴安盟 | 十堰 | 乌兰察布 | 铁岭 | 包头 | 海南 | 宜昌 | 青海西宁 | 山西太原 | 赵县 | 抚州 | 怀化 | 常州 | 驻马店 | 娄底 | 白沙 | 改则 | 内江 | 灵宝 | 台湾台湾 | 基隆 | 高雄 | 儋州 | 兴化 | 苍南 | 靖江 | 南充 | 高密 | 正定 | 六安 | 杞县 | 亳州 | 孝感 | 泰兴 | 鸡西 | 东阳 | 保亭 | 基隆 | 博尔塔拉 | 泸州 | 兴安盟 | 株洲 | 钦州 | 包头 | 通化 | 张北 | 辽源 | 锦州 | 克拉玛依 | 恩施 | 莱州 | 淮南 | 晋江 | 长垣 | 明港 | 常德 | 河源 | 长兴 | 燕郊 | 临汾 | 阿里 | 甘南 | 丽江 | 宿迁 | 池州 | 大同 | 如东 | 铜仁 | 长垣 | 德宏 | 汕头 | 和田 | 沛县 | 五家渠 | 灵宝 | 迁安市 | 琼中 | 临沧 | 临汾 | 张家口 | 大连 | 海东 | 驻马店 | 铜陵 | 天门 | 武夷山 | 西藏拉萨 | 永康 | 泗阳 | 黔南 | 长垣 | 台北 | 雅安 | 松原 | 新疆乌鲁木齐 | 桐城 | 遂宁 | 桓台 | 滁州 | 喀什 | 朝阳 | 仁怀 | 广西南宁 | 芜湖 | 塔城 | 醴陵 | 邵阳 | 汝州 | 玉树 | 鄂尔多斯 | 商丘 | 益阳 | 赣州 | 齐齐哈尔 | 张掖 | 张掖 | 包头 | 焦作 | 咸宁 | 柳州 | 邹城 | 东海 | 张掖 | 贵州贵阳 | 洛阳 | 山南 | 娄底 | 清徐 | 黑河 | 香港香港 | 大庆 | 滕州 | 香港香港 | 海西 | 吕梁 | 淮北 | 百色 | 六安 | 临汾 | 鄂州 | 广安 | 阿拉善盟 | 简阳 | 大同 | 毕节 | 漯河 | 南京 | 芜湖 | 内江 | 芜湖 | 济宁 | 宿迁 | 南通 | 大庆 | 宿州 | 吕梁 | 喀什 | 廊坊 | 海安 | 山南 | 上饶 | 燕郊 | 临汾 | 驻马店 | 聊城 | 昭通 | 云浮 | 辽源 | 无锡 | 汕头 | 台湾台湾 | 百色 | 汉中 | 宁波 | 防城港 | 鹰潭 | 韶关 | 沛县 | 庄河 | 德清 | 雄安新区 | 遂宁 | 亳州 | 甘孜 | 中山 | 厦门 | 上饶 | 金昌 | 淮安 | 吉安 | 阳春 | 天门 | 玉环 | 广饶 | 广汉 | 常德 | 海丰 | 巴彦淖尔市 | 德州 | 文昌 | 金昌 | 克孜勒苏 | 燕郊 | 吴忠 | 吉林 | 长治 | 马鞍山 | 揭阳 | 荆州 | 乌兰察布 | 大庆 | 绵阳 | 阳春 | 余姚 | 广饶 | 张掖 | 永康 | 德阳 | 荆门 | 威海 | 溧阳 | 威海 | 克拉玛依 | 迁安市 | 扬中 | 湛江 | 宁国 | 潮州 | 南阳 | 喀什 | 吉林长春 | 偃师 | 楚雄 | 义乌 | 朝阳 | 招远 | 吉安 | 阿拉尔 | 临夏 | 台湾台湾 | 眉山 | 邢台 | 阳泉 | 崇左 | 珠海 | 临猗 | 海丰 | 莒县 | 吉林 | 商洛 | 邹城 | 松原 | 宣城 | 巴音郭楞 | 任丘 | 吐鲁番 | 益阳 | 眉山 | 澄迈 | 白沙 | 乌海 | 兴化 | 五家渠 | 定安 | 河源 | 垦利 | 许昌 | 伊春 | 宝鸡 | 辽阳 | 伊春 | 郴州 | 益阳 | 天长 | 大理 | 偃师 | 黔东南 | 洛阳 | 齐齐哈尔 | 贵港 | 滁州 | 永康 | 延安 | 黔东南 | 伊犁 | 巴彦淖尔市 | 扬州 | 包头 | 巴彦淖尔市 | 徐州 | 湘西 | 惠州 | 肇庆 | 濮阳 | 延安 | 遂宁 | 天水 | 定州 | 宜宾 | 濮阳 | 宜春 | 山东青岛 | 锡林郭勒 | 邯郸 | 宁国 | 常德 | 海拉尔 | 安岳 | 湘西 | 崇左 | 天水 | 新泰 | 揭阳 | 吴忠 | 乐清 | 本溪 | 日喀则 | 东海 | 巴音郭楞 | 贵州贵阳 | 威海 | 渭南 | 台北 | 台湾台湾 | 肥城 | 屯昌 | 贵州贵阳 | 南平 | 南平 | 苍南 | 衡阳 | 潍坊 | 文昌 | 玉环 | 日土 | 芜湖 | 双鸭山 | 青州 | 赣州 | 瑞安 | 曹县 | 云南昆明 | 乌兰察布 | 安阳 | 乌海 | 三河 | 海北 | 大庆 | 慈溪 | 大庆 | 东海 | 济宁 | 滁州 | 雄安新区 | 巢湖 | 扬州 | 台山 | 临沧 | 陵水 | 黔东南 | 珠海 | 河源 | 余姚 | 大庆 | 醴陵 | 喀什 | 韶关 | 仙桃 | 大庆 | 肥城 | 海西 | 大同 | 天长 | 包头 | 永新 | 扬中 | 象山 | 任丘 | 枣庄 | 黔东南 | 焦作 | 山南 | 呼伦贝尔 | 张北 | 酒泉 | 澳门澳门 | 德清 | 遵义 | 苍南 | 湘潭 | 钦州 | 海宁 | 定安 | 长葛 | 温岭 | 晋城 | 永州 | 济宁 | 安阳 | 九江 | 三明 | 日照 | 攀枝花 | 瓦房店 | 青海西宁 | 三亚 | 和田 | 常德 | 台中 | 乐平 | 偃师 | 眉山 | 阿拉善盟 | 牡丹江 | 上饶 | 广元 | 乐清 | 巴彦淖尔市 | 朔州 | 莆田 | 泰州 | 六安 | 建湖 | 宁波 | 项城 | 锡林郭勒 | 新沂 | 林芝 | 晋江 | 湖北武汉 | 东营 | 玉环 | 吉林 | 燕郊 | 漳州 | 九江 | 衢州 | 赵县 | 安吉 | 仙桃 | 淮北 | 滕州 | 抚顺 | 辽源 | 澄迈 | 大庆 | 玉环 | 内江 | 莒县 | 宁国 | 大同 | 邹城 | 海北 | 吉林 | 汝州 | 济南 | 厦门 | 海南海口 | 泸州 | 安岳 | 溧阳 | 抚顺 | 丹阳 | 铜陵 | 齐齐哈尔 | 中卫 | 慈溪 | 台中 | 迪庆 | 莱州 | 东阳 | 那曲 | 宝鸡 | 益阳 | 邹城 | 东方 | 晋城 | 新疆乌鲁木齐 | 辽宁沈阳 | 淮南 | 鄢陵 | 临猗 | 衡水 | 黔南 | 台湾台湾 | 伊犁 | 日照 | 辽源 | 昌都 | 那曲 | 昌吉 | 阿克苏 |