5.標簽篇:audio和video

来源:https://www.cnblogs.com/lanshanxiao/archive/2020/05/27/12976809.html
-Advertisement-
Play Games

# 5.標簽篇:audio和video - audio 和 video ```html <style> * { margin:0; padding:0; } .video_player{ position:relative; width:1000px; height:500px; margin:0  ...


# 5.標簽篇:audio和video

 

- audio 和 video ```html <style>     * {         margin:0;         padding:0;     }     .video_player{         position:relative;         width:1000px;         height:500px;         margin:0 auto;     }     video{         position:absolute;         width:1000px;         height:500px;         left:0;         top:0;     }     .menu{         position:absolute;         width:100%;         height:50px;         background:rgba(0,0,0,.5);         bottom:0;         display:none;     }     .play{         position:absolute;         width:60px;         height:30px;         border:1px solid white;         text-align:center;         line-height:30px;         border-radius:10px;         margin:auto 0 auto 20px;         top:0;         bottom:0;         cursor:pointer;     }     .time{         position:absolute;         width:100px;         height:30px;         text-align:center;         line-height:30px;         margin:auto 0 auto 20px;         top:0;         bottom:0;         cursor:pointer;     }     .progress_bar{         position:absolute;         width:100%;         height:2px;         background:gray;         left:0;         top:-2px;     }     .progress_bar div{         position:absolute;         width:0px;         height:2px;         background:orange;         left:0;         top:0;     }     .progress_bar i{         position:absolute;         width:6px;         height:6px;         background:white;         border-radius:3px;         left:120px;         top:-2px;     }     .quick{         position:absolute;         width:60px;         height:30px;         border:1px solid white;         text-align:center;         line-height:30px;         color:white;         border-radius:10px;         margin:auto 0 auto 20px;         top:0;         left:800px;         bottom:0;         cursor:pointer;     }     .quick_list{         position:absolute;         width:80px;         height:120px;         background:pink;         left:800px;         top:-120px;         color:#fff;         background-color:rgba(0,0,0,.5);         display:none;     }     .quick_list li{         position:relative;         width:100%;         height:30px;         text-align:center;         line-height:30px;         list-style:none;         cursor:pointer;     }     .quick_list li:hover{         color:green;     }     .vol_add{         position:absolute;         width:60px;         height:30px;         border:1px solid white;         text-align:center;         line-height:30px;         color:white;         border-radius:10px;         margin:auto 0 auto 20px;         top:0;         left:500px;         cursor:pointer;     }     .vol_ins{         position:absolute;         width:60px;         height:30px;         border:1px solid white;         text-align:center;         line-height:30px;         color:white;         border-radius:10px;         margin:auto 0 auto 20px;         top:0;         left:580px;         cursor:pointer;     }     .full_screen{         position:absolute;         width:60px;         height:30px;         border:1px solid white;         text-align:center;         line-height:30px;         color:white;         border-radius:10px;         margin:auto 0 auto 20px;         top:0;         left:880px;         cursor:pointer;     } </style> <div class="video_player">     <video src="view.mov"></video>     <div class="menu">         <div class="play">播放</div>         <div class="time">0:00/0:00</div>         <div class="progress_bar">             <div></div>             <i></i>         </div>         <div class="quick">倍速</div>         <div class="quick_list">             <ul>                 <li>正常</li>                 <li>1.25</li>                 <li>1.5</li>                 <li>2.0</li>             </ul>         </div>         <div class="vol_add">音量加</div>         <div class="vol_ins">音量減</div>         <div class="full_screen">全屏</div>     </div> </div> <script>     var videoPlayer = document.getElementByClassName("video_player")[0];     var menu = document.getElementByClassName("menu")[0];     var play = document.getElementByClassName("play")[0];     var video = document.getElementsByTagName("video")[0];     var time = document.getElementByClassName("time")[0];     var progressBar = document.getElementByClassName("progress_bar")[0];     var quick = document.getElementByClassName("quick")[0];     var quickList = document.getElementByClassName("quick_list")[0];     var volAdd = document.getElementByClassName("vol_add")[0];     var volIns = document.getElementByClassName("vol_ins")[0];     var fullScreen = document.getElementByClassName("full_screen")[0];          videoPlayer.onmouseenter = function(){         menu.style.display = "block";     };     videoPlayer.onmouseleave = function(){         menu.style.display = "none";     };     play.onclick = function(){//視頻播放與暫停         if(video.paused){//視頻處於暫停狀態             video.play();//視頻播放             play.innerHTML = "暫停";         }else{             video.pause();//視頻暫停             play.innerHTML = "播放";         }     };

 

    setInterval(function(){         var total = video.duration;//視頻總時長         var nowTime = video.currentTime;//當前播放時間         time.innerHTML = parseInt(nowTime/60) + ":" + parseInt(nowTime%60) + "/" + parseInt(total/60) + ":" + parseInt(total%60);//設置播放時間

 

        var progressBarWidth = nowTime / total * progressBar.clientWidth;         progressBar.getElementsByTagName("div")[0].style.width = width + "px";         progressBar.getElementsByTagName("i")[0].style.left = width + "px";     }, 1000);

 

    progressBar.onmouseenter = function(){         progressBar.style.height = "14px";         progressBar.style.top = "-14px";         progressBar.getElementsByTagName("div")[0].style.height = "14px";         progressBar.getElementsByTagName("i")[0].style.height = "18px";     };     progressBar.onmouseleave = function(){         progressBar.style.height = "2px";         progressBar.style.top = "-2px";         progressBar.getElementsByTagName("div")[0].style.height = "2px";         progressBar.getElementsByTagName("i")[0].style.height = "6px";     };     progressBar.onclick = function(e){         var location = e.layerX;         var width = progressBar.clientWidth;         var targetTime = location / width * video.duration;         video.currentTime = targetTime;//只有在響應頭(Response Headers)裡面有Content-Range屬性，才能進行進度跳轉，否則不能進行跳轉     };     quick.onclick = function(){         quickList.style.display = "block";     }     quick.onmouseleave = function(){         quickList.style.display = "none";     }

 

    var liList = quickList.getElementsByTagName("ul")[0].getElementsByTagName("li");     for(var i = 0; i < liList.length; i++){         list[i].index = i;         list[i].onclick = function(){             if(this.index == 0){//正常                 video.playbackRate = 1;//設置速率                 quick.innerHTML = "倍速";             }else if(this.index == 1){//1.25                 video.playbackRate = 1.25;                 quick.innerHTML = "x 1.25";             }else if(this.index == 2){//1.5                 video.playbackRate = 1.5;                 quick.innerHTML = "x 1.5";             }else if(this.index == 3){//2                 video.playbackRate = 2;                 quick.innerHTML = "x 2";             }         }     }

 

    volAdd.onclick = function(){         video.volume = video.volume + 0.1 > 1 ? 1 : video.volume + 0.1;     }     volIns.onclick = function(){         video.volume = video.volume - 0.1 < 0 ? 0 : video.volume - 0.1;     }

 

    fullScreen.onclick = function(){         var dom = document.documentElement;         dom.requestFullscreen();//全屏         videoPlayer.style.width = window.screen.width + "px";         videoPlayer.style.height = window.screen.height + "px";         video.style.style.width = window.screen.width + "px";         video.style.style.height = window.screen.height + "px";     }

 

    videoPlayer.onmousemove = function(){         //利用函數防抖控制菜單隱藏，未實現         menu.style.display = "block";     }; </script> ```   以上是markdown格式的筆記
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 【12c】新特性：一文帶你詳細瞭解Oracle 12c 資料庫的自動數據優化（ADO）
    寫在前面 Oracle 12c 可以通過熱圖和自動數據優化（ADO）實現信息生命周期的管理（ILM），上篇介紹了熱圖，本篇將對自動數據優化進行展開，通過熱圖和自動數據優化，最終實現信息生命周期管理。 1 自動數據優化工作流程 使用自動數據優化，必須先在系統級別啟用熱圖，通過修改初始化參數heat_m ...
  • Flink 流式聚合性能調優指南
    原文：Flink 流式聚合性能調優指南 SQL 是數據分析中使用最廣泛的語言。Flink Table API 和 SQL 使用戶能夠以更少的時間和精力定義高效的流分析應用程式。此外，Flink Table API 和 SQL 是高效優化過的，它集成了許多查詢優化和運算元優化。但並不是所有的優化都是預設 ...
  • mysql配置遠程登錄
    配置遠程登錄MySQL 一個小白，記錄每次遇到的坑。 環境是Docker+MySQL 步驟 在伺服器端開啟遠程訪問 首先進入mysql資料庫，然後輸入下麵兩個命令: grant all privileges on *.* to 'root'@'%'; flush privileges; 重啟MySQ ...
  • iOS開發一行代碼搞定緩存計算及清除緩存
    話不多說，直接擼代碼 1 // 2 // gzhCache.h 3 // cache 4 // 5 // Created by 郭志賀 on 2020/5/27. 6 // Copyright © 2020 郭志賀. All rights reserved. 7 // 8 9 #import <Fo ...
  • Flutter Weekly Issue 57
    新聞 更方便、更強大: Flutter package 生態系統更新 教程 Fish-Lottie：純Dart如何實現一個高性能動畫框架？ 插件 frefresh Help you to build pull-down refresh and pull-up loading in the simpl ...
  • Java工作流引擎的測試容器-功能-使用方法-註意事項
    工作流引擎的測試容器-功能-使用方法-註意事項 關鍵字 Ccbpm， ccflow，jflow,工作流引擎，工作流引擎測試容器，表單引擎 功能說明 工作流的測試容器是為瞭解決手工模擬人工登錄模式下測試繁瑣的問題，而開發的一個測試功能，原來手工測試的按鈕仍然保留。 手工測試是通過輸入用戶名密碼的方式登... ...
  • JavaScript連載13-數組、函數
    一、數組 1.數組是一種引用數據類型，屬於對象 2.數組的存儲性能比普通對象要好，在開發中我們經常使用數組來存儲一些數據。 3.創建數組的方式：（1）使用Array構造函數； i.創建一個空數組 var arr1 = new Array(); ii.創建一個長度為30的數組 var arr2 = n ...
  • BFC是個啥？
    BFC的定義 BFC到底是個啥呢？先貼出一段大佬們在分析BFC的時候字面上的理解： 在CSS佈局中，是通過對一個個box的佈局，來實現整體頁面的佈局，這一個個box也就是一個個容器元素，這些元素分為兩類：塊級元素(block)，行內元素(inline)。 對於不同類型的元素，有不同的處理規則，這個元 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類