当前位置：网站首页>H5c3 advanced - player

H5c3 advanced - player

2022-07-05 22:30:00 【Felikslugger.】

player

  1. Common methods ：load() load 、play() Play 、pause() Pause

    jQuery There is no way to play the video control 、 To operate video playback , Must use native js Method ——dom Elements

  2. Common properties ：

    • currentTime Current progress of video playback
    • duration: Total time of video 100000/60
    • paused： Status of video playback

  3. Common events ：

    • oncanplay: Event when the user can start playing video / Audio (audio/video) Trigger when
    • ontimeupdate: Report the current playback progress through this event
    • onended: Triggered at the end of playback —— Reset

  4. Practice 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/font-awesome-4.7.0/css/font-awesome.css">
    <style> video {
       height: 100%; margin: 0 auto; display: none; } .elapse {
       width: 0%; height: 20px; background-color: black; } .bar {
       width: 100%; height: 100%; border-radius: 3px; cursor: pointer; position: absolute; left: 0; top: 0; opacity: 0; z-index: 999; } </style>
</head>
<body>
    <h3 class="playerTitle"> Video player </h3>
    <div class="player">
         Change here to your own video file 
        <video src="../html/ Lie without making a draft .mp4"></video>
        <div class="controls">
            <a href="javascript:;" class="switch fa fa-play"></a>
            <a href="javascript:;" class="expand fa fa-pause"></a>
            <div class="progress">
                <div class="bar"></div>
                <div class="loaded"></div>
                <div class="elapse"></div>
            </div>
            <div class="time">
                <span class="currentTime">00:00:00</span>
                \
                <span class="totalTime">00:00:00</span>
            </div>
        </div>
    </div>
    <script src="../js/jquery.js"></script>
    <script> // adopt jQuery To achieve the function  $(function(){
       //1. Get the player  var video = $("video")[0]; //2. Realize playback and pause  $(".switch").click(function(){
       // Switch between play and pause  if(video.paused){
       video.play(); // Remove pause style , Add playback style  }else{
       video.pause(); // Remove playback style , Add pause style  } $(this).toggleClass("fa-play fa-pause"); }); //3. Realize full screen operation  $(".expand").click(function(){
       // Full screen > Different browsers , Different prefixes  if(video.requestFullscreen){
       video.requestFullscreen(); } else if(video.webkitRequestFullScreen){
       video.webkitRequestFullScreen(); } else if(video.mozRequestFullScreen){
       video.mozRequestFullScreen(); } else if(video.msRequestFullScreen){
       video.msRequestFullScreen } }); //4. Realize the playback business logic ： When the video asking price can be played, the following event will be triggered  video.oncanplay=function(){
       //1. Set the video file to display  video.style.display="block"; //2. Get the total time of current video file , Calculate the hours, minutes and seconds  var total = video.duration; //3. Counting time, minutes and seconds  // var hour = Math.floor(total/3600); // // repair 0 operation  // hour=hour<10?"0"+hour:hour; // var minute = Math.floor(total%3600/60); // minute=minute<10?"0"+minute:minute; // var second = Math.floor(total%60); // second=second<10?"0"+second:second; // Display the calculation results in the designated dom In the elements  var result = getResult(total) $(".totalTime").html(result); } // Get the total time and calculate the hours, minutes and seconds  function getResult(time){
       var hour = Math.floor(time/3600); // repair 0 operation  hour=hour<10?"0"+hour:hour; var minute = Math.floor(time%3600/60); minute=minute<10?"0"+minute:minute; var second = Math.floor(time%60); second=second<10?"0"+second:second; // Return results  return hour+":"+minute+":"+second; } //5. Realize the business logic in the playback process , When the video is played, it will trigger ontimeupdate event  video.ontimeupdate=function(){
       //1. Get the current playback event  var current = video.currentTime; var result = getResult(current); $(".currentTime").html(result); // Set the current playback progress bar style  var percent = current/video.duration*100+"%"; $(".elapse").css("width",percent); } //6. Realize the jump broadcasting of video  $(".bar").click(function(e){
       //1. Get the current mouse relative to the parent element left value -- Offset value  var offset = e.offsetX; //2. Calculate the ratio of the offset value to the total width of the total parent element  var percent = offset/$(this).width(); //3. Calculate the video progress value corresponding to this position  var current = percent*video.duration; // Set the current video currenTime video.currentTime = current; }) //7. After playing , Reset the state of the player  video.onended=function(){
       video.currentTime=0; $(".switch").removeClass("fa-pause").addClass("fa-play"); } }); </script>
</body>
</html>
原网站

版权声明
本文为[Felikslugger.]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202140432114269.html

边栏推荐

猜你喜欢

随机推荐