programming html Videojs prevent seeking

Hướng dẫn html5 video remove progress bar - html5 video loại bỏ thanh tiến trình

Cách tiếp cận trước đây sẽ chỉ hoạt động trong một số trình duyệt như Chrome hoặc Safari, nhưng không phải trong Firefox hay Internet Explorer Tôi sẽ đề nghị xây dựng trình phát video của riêng mình, theo cách đó bạn sẽ có quyền kiểm soát các yếu tố điều khiển

Trong trường hợp này, tôi chỉ cần nút phát/tạm dừng, vì vậy người dùng không thể nhanh chóng chuyển tiếp video

HTML


    
        
    
    
        Play

JS

function loadVideo[]{
    myMovie=document.getElementById['myMovie'];
    playButton=document.getElementById['playButton'];
    playButton.addEventListener['click', playOrPause, false];
}

function playOrPause[] {
    if [!myMovie.paused && !myMovie.ended]{
        myMovie.pause[];
        playButton.innerHTML='Play';
    } else {
        myMovie.play[];
        playButton.innerHTML='Pause';
    }
}

window.addEventListener['load',loadVideo,false];

CSS

.skin {
    width:640px;
    margin:10px auto;
    padding:5px;
}
nav {
    width:70px;
    height:22px;
    padding: 5px 0px;
    margin: 0 auto;
}

[Thẻ điều hướng và CSS chỉ được bao gồm để thêm một số kiểu dáng]

Cách tiếp cận trước đây sẽ chỉ hoạt động trong một số trình duyệt như Chrome hoặc Safari, nhưng không phải trong Firefox hay Internet Explorer Tôi sẽ đề nghị xây dựng trình phát video của riêng mình, theo cách đó bạn sẽ có quyền kiểm soát các yếu tố điều khiển, xu hướng dựa trên điểm số cao nhất Sắp xếp và trở lại với nó nếu không có bài đăng nào là xu hướng. Sử dụng nút chơi của bạn ở đây để chơi và tạm dừng. Điều đó làm việc cho tôi, hy vọng rằng giải pháp cũng làm việc cho người khác. - & nbsp; Dwain B ngày 1 tháng 9 năm 2020 lúc 20:27

audio::-webkit - media - controls - timeline,
   video::-webkit - media - controls - timeline {
      display: none;
   }
audio::-webkit - media - controls,
   video::-webkit - media - controls {
      display: none;
   }

HTML


   
      
   
   
      Play

JS

function loadVideo[] {
   myMovie = document.getElementById['myMovie'];
   playButton = document.getElementById['playButton'];
   playButton.addEventListener['click', playOrPause, false];
}

function playOrPause[] {
   if [!myMovie.paused && !myMovie.ended] {
      myMovie.pause[];
      playButton.innerHTML = 'Play';
   } else {
      myMovie.play[];
      playButton.innerHTML = 'Pause';
   }
}

window.addEventListener['load', loadVideo, false];

CSS

.skin {
   width: 640 px;
   margin: 10 px auto;
   padding: 5 px;
}
nav {
   width: 70 px;
   height: 22 px;
   padding: 5 px 0 px;
   margin: 0 auto;
}

video::-webkit - media - controls - timeline {
   display: none;
}


Gợi ý: 2

Phần tử có kiểu cơ bản sau đây được thiết lập:, có một số thuộc tính cũng cần được đặt cho tất cả các phần tử trong các điều khiển video:, giống như các phần tử, cũng có đường viền mặc định, được xóa ở đây. Nó cũng được đưa ra một góc tròn nhẹ vì lý do thẩm mỹ. Thuộc tính màu cũng được định nghĩa ở đây là Internet Explorer sử dụng màu được xác định này để tạo kiểu cho màu nền của thanh tiến trình khi nó tăng. ]:


   Play/Pause
   Stop
   
      
         
      
   
   Mute/Unmute
   Vol+
   Vol-
   Fullscreen


figure {
   max - width: 64 rem;
   width: 100 % ;
   max - height: 30.875 rem;
   height: 100 % ;
   margin: 1.25 rem auto;
   padding: 1.051 % ;
   background - color: #666;
}

function loadVideo[]{
    myMovie=document.getElementById['myMovie'];
    playButton=document.getElementById['playButton'];
    playButton.addEventListener['click', playOrPause, false];
}

function playOrPause[] {
    if [!myMovie.paused && !myMovie.ended]{
        myMovie.pause[];
        playButton.innerHTML='Play';
    } else {
        myMovie.play[];
        playButton.innerHTML='Pause';
    }
}

window.addEventListener['load',loadVideo,false];
0

function loadVideo[]{
    myMovie=document.getElementById['myMovie'];
    playButton=document.getElementById['playButton'];
    playButton.addEventListener['click', playOrPause, false];
}

function playOrPause[] {
    if [!myMovie.paused && !myMovie.ended]{
        myMovie.pause[];
        playButton.innerHTML='Play';
    } else {
        myMovie.play[];
        playButton.innerHTML='Pause';
    }
}

window.addEventListener['load',loadVideo,false];
1

function loadVideo[]{
    myMovie=document.getElementById['myMovie'];
    playButton=document.getElementById['playButton'];
    playButton.addEventListener['click', playOrPause, false];
}

function playOrPause[] {
    if [!myMovie.paused && !myMovie.ended]{
        myMovie.pause[];
        playButton.innerHTML='Play';
    } else {
        myMovie.play[];
        playButton.innerHTML='Pause';
    }
}

window.addEventListener['load',loadVideo,false];
2


Gợi ý: 3

Hầu hết các trình phát video cho phép bạn nhấp vào thanh tiến trình để nhảy đến một điểm cụ thể trong video và chúng tôi sẽ không khác. Đầu tiên, chúng tôi cần chọn phần tử ToolTip :, Hiển thị thời lượng video và thời gian trôi qua, làm mới trình duyệt của bạn và dùng thử. Bạn sẽ thấy bản cập nhật thanh tiến trình khi video đang được phát. Sau đó, chúng tôi sẽ tạo một chức năng chuyển đổi trạng thái phát lại của video:

function loadVideo[]{
    myMovie=document.getElementById['myMovie'];
    playButton=document.getElementById['playButton'];
    playButton.addEventListener['click', playOrPause, false];
}

function playOrPause[] {
    if [!myMovie.paused && !myMovie.ended]{
        myMovie.pause[];
        playButton.innerHTML='Play';
    } else {
        myMovie.play[];
        playButton.innerHTML='Pause';
    }
}

window.addEventListener['load',loadVideo,false];
3

function loadVideo[]{
    myMovie=document.getElementById['myMovie'];
    playButton=document.getElementById['playButton'];
    playButton.addEventListener['click', playOrPause, false];
}

function playOrPause[] {
    if [!myMovie.paused && !myMovie.ended]{
        myMovie.pause[];
        playButton.innerHTML='Play';
    } else {
        myMovie.play[];
        playButton.innerHTML='Pause';
    }
}

window.addEventListener['load',loadVideo,false];
4

function loadVideo[]{
    myMovie=document.getElementById['myMovie'];
    playButton=document.getElementById['playButton'];
    playButton.addEventListener['click', playOrPause, false];
}

function playOrPause[] {
    if [!myMovie.paused && !myMovie.ended]{
        myMovie.pause[];
        playButton.innerHTML='Play';
    } else {
        myMovie.play[];
        playButton.innerHTML='Pause';
    }
}

window.addEventListener['load',loadVideo,false];
5

function loadVideo[]{
    myMovie=document.getElementById['myMovie'];
    playButton=document.getElementById['playButton'];
    playButton.addEventListener['click', playOrPause, false];
}

function playOrPause[] {
    if [!myMovie.paused && !myMovie.ended]{
        myMovie.pause[];
        playButton.innerHTML='Play';
    } else {
        myMovie.play[];
        playButton.innerHTML='Pause';
    }
}

window.addEventListener['load',loadVideo,false];
6

function loadVideo[]{
    myMovie=document.getElementById['myMovie'];
    playButton=document.getElementById['playButton'];
    playButton.addEventListener['click', playOrPause, false];
}

function playOrPause[] {
    if [!myMovie.paused && !myMovie.ended]{
        myMovie.pause[];
        playButton.innerHTML='Play';
    } else {
        myMovie.play[];
        playButton.innerHTML='Pause';
    }
}

window.addEventListener['load',loadVideo,false];
7


Gợi ý: 4

Lưu ý rằng kỹ thuật được giải thích trong bài viết này để ẩn các điều khiển gốc chỉ hoạt động trong các trình duyệt hỗ trợ bóng tối. Chỉ cần định vị các điều khiển tùy chỉnh trên đầu chúng bằng cách sử dụng các kiểu CSS đơn giản và cơ bản nhắm mục tiêu vào chế độ toàn màn hình. Điều này ẩn các điều khiển gốc, nhưng cũng có giới hạn: các điều khiển tùy chỉnh có thể có nền tảng trong suốt, nếu không các điều khiển gốc sẽ hiển thị thông qua., Cái chứa cả điều khiển và video. Điều này thực sự có thể giúp tạo kiểu video và các điều khiển trên toàn màn hình dễ dàng hơn., Vì vậy, trừ khi bạn muốn ẩn tất cả các điều khiển phương tiện gốc của trình duyệt, bạn sẽ cần chỉ định loại điều khiển phương tiện nào cần ẩn Phần tử video và bạn sẽ nhắm mục tiêu chúng bằng cách chỉ định phạm vi phạm vi của đối với yếu tố giả này:

Nhưng làm thế nào để chúng ta xác định yếu tố giả nào được liên kết với phần tử DOM bóng mà chúng ta cần tạo kiểu? Một số yếu tố ít nhiều được biết đến, giống như đầu vào phạm vi, có sẵn phần tử giả để tạo ra ngón tay cái của nó trong các trình duyệt WebKit

function loadVideo[]{
    myMovie=document.getElementById['myMovie'];
    playButton=document.getElementById['playButton'];
    playButton.addEventListener['click', playOrPause, false];
}

function playOrPause[] {
    if [!myMovie.paused && !myMovie.ended]{
        myMovie.pause[];
        playButton.innerHTML='Play';
    } else {
        myMovie.play[];
        playButton.innerHTML='Pause';
    }
}

window.addEventListener['load',loadVideo,false];
8

Firefox cũng cung cấp hai yếu tố giả cho các đầu vào phạm vi kiểu ngay bây giờ khi nó hỗ trợ chúng bắt đầu từ phiên bản 23.0:


Gợi ý: 5

Tôi muốn loại bỏ thanh tiến trình mỏng nằm dưới trình phát video - nó thậm chí còn hiển thị trên toàn màn hình rất lạ. Trong thực tế tại sao nó cần thiết? Khi một video đang phát, không có sự mất tập trung nào khác - đặc biệt là điều này. Trợ giúp đánh giá cao. Trong thực tế tại sao nó cần thiết? Khi một video đang phát, không có sự mất tập trung nào khác - đặc biệt là điều này. Giúp đánh giá cao. , Làm cách nào để loại bỏ thanh tiến trình khỏi plugin trình phát video cuối cùng dính trong WordPress?

Bạn có thể làm như vậy bằng cách đặt khai báo CSS như thế này vào kiểu mẫu của bạn:

audio::-webkit - media - controls - timeline,
   video::-webkit - media - controls - timeline {
      display: none;
   }
audio::-webkit - media - controls,
   video::-webkit - media - controls {
      display: none;
   }
0

function loadVideo[]{
    myMovie=document.getElementById['myMovie'];
    playButton=document.getElementById['playButton'];
    playButton.addEventListener['click', playOrPause, false];
}

function playOrPause[] {
    if [!myMovie.paused && !myMovie.ended]{
        myMovie.pause[];
        playButton.innerHTML='Play';
    } else {
        myMovie.play[];
        playButton.innerHTML='Pause';
    }
}

window.addEventListener['load',loadVideo,false];
9

Bạn có thể sử dụng CSS này:

audio::-webkit - media - controls - timeline,
   video::-webkit - media - controls - timeline {
      display: none;
   }
audio::-webkit - media - controls,
   video::-webkit - media - controls {
      display: none;
   }
1

.skin {
    width:640px;
    margin:10px auto;
    padding:5px;
}
nav {
    width:70px;
    height:22px;
    padding: 5px 0px;
    margin: 0 auto;
}
0


Gợi ý: 6

.skin {
    width:640px;
    margin:10px auto;
    padding:5px;
}
nav {
    width:70px;
    height:22px;
    padding: 5px 0px;
    margin: 0 auto;
}
1


Gợi ý: 7

Bây giờ bạn sẽ thấy cách thay đổi màu của chỉ báo tiến trình. Màu mặc định cho chỉ báo là Fuchsia, như được hiển thị ở đây:, Bây giờ bạn sẽ thấy cách thay đổi màu của các điều khiển âm lượng. Giao diện mặc định được hiển thị ở đây, một nút âm lượng màu trắng với thanh mức âm lượng fuchsia:, Để thay đổi màu của nút âm lượng và nút tắt tiếng Khi bạn nhấp vào nó, hãy sử dụng bộ chọn hiển thị ở đây: Màu sắc của yếu tố và cần được tạo kiểu. Phong cách cần thiết được hiển thị ở đây:

Khi bạn biết điều này, bạn có thể sử dụng các kiểu để thay đổi chính người chơi. Chẳng hạn, bao gồm một đường viền xung quanh người chơi, bạn có thể sử dụng kiểu này:

.skin {
    width:640px;
    margin:10px auto;
    padding:5px;
}
nav {
    width:70px;
    height:22px;
    padding: 5px 0px;
    margin: 0 auto;
}
2

Nếu bạn muốn tùy chỉnh iframe, bạn có thể làm điều này bằng cách sử dụng bộ chọn phần tử. Sau đó sử dụng thẻ 

audio::-webkit - media - controls - timeline,
   video::-webkit - media - controls - timeline {
      display: none;
   }
audio::-webkit - media - controls,
   video::-webkit - media - controls {
      display: none;
   }
2 để sửa đổi như mong muốn. Trong ví dụ bên dưới một đường viền được thêm vào xung quanh người chơi.

.skin {
    width:640px;
    margin:10px auto;
    padding:5px;
}
nav {
    width:70px;
    height:22px;
    padding: 5px 0px;
    margin: 0 auto;
}
3

Từ mã được tô sáng ở trên, bạn có thể thấy lớp được gán cho nút là 

audio::-webkit - media - controls - timeline,
   video::-webkit - media - controls - timeline {
      display: none;
   }
audio::-webkit - media - controls,
   video::-webkit - media - controls {
      display: none;
   }
3. Màu của nút chơi [để phù hợp với hổ] và độ mờ sẽ được thay đổi với các kiểu này:

.skin {
    width:640px;
    margin:10px auto;
    padding:5px;
}
nav {
    width:70px;
    height:22px;
    padding: 5px 0px;
    margin: 0 auto;
}
4

Sau đó, tham chiếu nút phát lớn của người chơi trong CSS như sau:

.skin {
    width:640px;
    margin:10px auto;
    padding:5px;
}
nav {
    width:70px;
    height:22px;
    padding: 5px 0px;
    margin: 0 auto;
}
5

Bạn hoàn toàn có thể ẩn nút phát bằng cách sử dụng kiểu sau:

Bạn có thể kiểm soát nếu bạn muốn thanh điều khiển và các điều khiển có chứa trong đó, có thể nhìn thấy hoặc không. Nếu bạn muốn ẩn thanh điều khiển từ đầu tạo người chơi, bạn có thể sử dụng kiểu này:

.skin {
    width:640px;
    margin:10px auto;
    padding:5px;
}
nav {
    width:70px;
    height:22px;
    padding: 5px 0px;
    margin: 0 auto;
}
6

Nếu bạn muốn thực hiện điều này một cách linh hoạt dựa trên một số sự kiện, bạn có thể sử dụng các phương thức 

audio::-webkit - media - controls - timeline,
   video::-webkit - media - controls - timeline {
      display: none;
   }
audio::-webkit - media - controls,
   video::-webkit - media - controls {
      display: none;
   }
4. Đoạn mã bên dưới thể hiện các phương thức sử dụng [điều này giả sử bạn có 
audio::-webkit - media - controls - timeline,
   video::-webkit - media - controls - timeline {
      display: none;
   }
audio::-webkit - media - controls,
   video::-webkit - media - controls {
      display: none;
   }
5 với giá trị 
audio::-webkit - media - controls - timeline,
   video::-webkit - media - controls - timeline {
      display: none;
   }
audio::-webkit - media - controls,
   video::-webkit - media - controls {
      display: none;
   }
6 trên video]:

.skin {
    width:640px;
    margin:10px auto;
    padding:5px;
}
nav {
    width:70px;
    height:22px;
    padding: 5px 0px;
    margin: 0 auto;
}
7

Bạn cũng có thể làm cho nó để các điều khiển không bao giờ ẩn. Để làm điều này sử dụng phong cách 

audio::-webkit - media - controls - timeline,
   video::-webkit - media - controls - timeline {
      display: none;
   }
audio::-webkit - media - controls,
   video::-webkit - media - controls {
      display: none;
   }
7. Bộ chọn rất dài vì sáu lớp được sử dụng cho tính đặc hiệu của các biến đổi.

.skin {
    width:640px;
    margin:10px auto;
    padding:5px;
}
nav {
    width:70px;
    height:22px;
    padding: 5px 0px;
    margin: 0 auto;
}
8

.skin {
    width:640px;
    margin:10px auto;
    padding:5px;
}
nav {
    width:70px;
    height:22px;
    padding: 5px 0px;
    margin: 0 auto;
}
9


Làm thế nào tôi có thể ẩn một video HTML5 khi nó hoàn thành chơi?

1 câu trả lời..
Nhận đối tượng video ..
Thêm một người nghe video để nghe khi nó kết thúc [kết thúc].
Đặt kiểu hiển thị thành không ..

Làm cách nào để xóa video thanh tiến trình?

Mở video YouTube bạn muốn xem và nhấn Ctrl+M.Phím tắt này có thể làm cho YouTube ẩn thanh quy trình ngay cả khi bạn chưa tạm dừng video YouTube.press Ctrl+M. This keyboard shortcut can make YouTube hide the process bar even you haven't paused the YouTube video.

Làm cách nào để ẩn các điều khiển trong video HTML?

Chúng ta có thể ẩn các điều khiển bằng cách không thêm thuộc tính điều khiển vào phần tử video.Ngay cả khi không có thuộc tính điều khiển trên các phần tử, người dùng có thể xem phần Điều khiển bằng cách nhấp chuột phải vào video và cho phép các điều khiển hiển thị.not adding the controls attribute to the video element. Even without controls attribute on the elements the user can view the controls section by right-clicking on the video and enabling the show controls .

Làm cách nào để tùy chỉnh các điều khiển video trong HTML5?

Xây dựng các điều khiển tùy chỉnh cho video HTML5..
Thiết lập video HTML5 của bạn.Điều đầu tiên bạn cần làm là viết một số HTML cho video của bạn và các điều khiển.....
Thiết lập JavaScript.....
Kết nối nút chơi/tạm dừng.....
Kết nối nút tắt tiếng.....
Đá nó toàn màn hình.....
Hooking lên thanh tìm kiếm.....
Kết nối điều khiển âm lượng ..

Bài Viết Liên Quan

Hướng dẫn python filter function with multiple arguments - hàm lọc python với nhiều đối số
Hướng dẫn how do i turn an array into a list in python? - làm cách nào để chuyển một mảng thành một danh sách trong python?
Cài hệ điều hành linux trên win 10 64bit
Hướng dẫn are python modules written in c? - các mô-đun python được viết bằng c?
Hướng dẫn time php timezone - múi giờ time php
The voice 2023 tập 2 full
Hướng dẫn how do you create histograms in python? - làm cách nào để bạn tạo biểu đồ trong python?
Hướng dẫn how do i print a carriage return in python? - làm cách nào để in ký tự xuống dòng trong python?
Hướng dẫn can you make graphs using python? - bạn có thể tạo đồ thị bằng python không?
Hướng dẫn how to submit form using curl in php - cách gửi biểu mẫu bằng curl trong php
Hướng dẫn how to take only character input in python - làm thế nào để chỉ nhập ký tự trong python
Hướng dẫn duplicate number in array python - số trùng lặp trong python mảng
Hướng dẫn websites for python practice - trang web thực hành python
Hướng dẫn install php 7.4 centos 8 - cài đặt php 7.4 centos 8
Hướng dẫn remove outline button bootstrap - loại bỏ nút phác thảo bootstrap
Hướng dẫn dùng numpy map python
Hướng dẫn install php pdo - cài đặt php pdo
Giá măng cụt 2023
Hướng dẫn which of the following is used to display the output in php in mcq? - cái nào sau đây được sử dụng để hiển thị đầu ra trong php trong mcq?
Hướng dẫn php send email not working - php gửi email không hoạt động

Toplist mới

#1
Top 7 sự tích hồ gươm - ngữ văn lớp 6 2023
6 tháng trước
#2
Top 7 gdcd 6 bài 1 kết nối tri thức 2023
6 tháng trước
#3
Top 7 ý nghĩa của xây dựng gia đình văn hóa 2023
6 tháng trước
#4
Top 6 mẫu hợp đồng mượn đất làm nhà xưởng 2023
6 tháng trước
#5
Top 3 tổng tài biến thái tôi yêu anh tập 27 2023
6 tháng trước
#6
Top 6 kết thực phim mỹ nhân vô lệ 2023
6 tháng trước
#7
Top 9 trong những câu thơ sau câu nào sử dụng thành ngữ 2023
6 tháng trước
#8
Top 8 đề tài và chủ de của tác phẩm tắt đèn 2023
6 tháng trước
#9
Top 5 tiểu sử của thầy thích pháp hòa 2023
6 tháng trước

Bài mới nhất

Có xét ngành nghề khi nhập khẩu hàng hóa năm 2024
Phần mềm khắc phụ lỗi wifi trên an năm 2024
Chủng chuẩn e.coli atcc 25922 là gì năm 2024
Chương trình giải toán giải toán đại số năm 2024
Học hỏi những điểm tốt tiếng anh là gì năm 2024
Dì ruột bán cháu ở thường xuân thanh hóa năm 2024
Kiến bu quần lót là hiện tượng gì năm 2024
Bài tập hỗn hợp kim loại tác dụng với hno3 năm 2024

Chủ Đề

programming Hỏi Đáp Toplist Là gì Bài Tập Địa Điểm Hay Mẹo Hay Học Tốt Nghĩa của từ Công Nghệ Khỏe Đẹp bao nhiêu Top List Tiếng anh Bao nhiêu Sản phẩm tốt Xây Đựng Ngôn ngữ javascript Ở đâu Đại học Hướng dẫn Bài tập Tại sao Dịch So Sánh Máy tính Món Ngon mẹo hay Bao lâu Thế nào So sánh Khoa Học Vì sao Lớp 9 Lớp 10