记一次h5视频音频使用经验

最新推荐文章于 2021-06-08 00:51:25 发布

海阔天空.

最新推荐文章于 2021-06-08 00:51:25 发布

阅读量975

点赞数

分类专栏： h5 文章标签： h5视频、音频设置

本文链接：https://blog.csdn.net/weixin_41804429/article/details/88727936

版权

h5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一个app项目中需要用到一些h5页面，页面中是含音频、视频的。video，audio原生组件ui太丑了，只有自定义了。
一开始视频组件在安卓内有些兼容问题，全屏功能无法使用，折腾了一会儿，在网上找到一个第三方播放器 Aliplayer，阿里云推出的，第一次使用，感觉很方便，使用简单，能在线配置，根据所选配置会生成代码，直接拿来就用，用起来比较爽！有时候我们需要根据视频帧来生成视频封面图片（就是视频未播放时展示的图片），如果视频是存放在七牛云上的，可以使用七牛云API直接生成很方便, 使用方法就是发送get请求 URI为：视频地址 + '?vframe/jpg/offset/10/w/480/h/270', 值具体代表什么意思，可查看文档。

处理音频的时候，遇到一些问题，一直不知道是什么原因，最后总算找到了。原来是由于我使用了vue 和原生js 都处理了相应的dom产生了冲突，由于页面不复杂，最后决定只使用原生js。

音频效果图如下：

全部代码如下

index.html


<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; />
    <meta name="format-detection" content="telephone=no" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <title>问春测试</title>
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.1/skins/default/aliplayer-min.css" />
    <link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div id="containner">
    <div id="intro"></div>
    <div id="content"></div>
    <div id="video-info">
      <div class="prism-player" id="player-con"></div>
    </div>
    <div id="audio-info">
      <div class="audio-wrapper">
        <div class="audio-left">
          <img id="icon" src="play.png" onclick="play()"/>
        </div>
        <div class="audio-right">
          <div id="title">test</div>
          <div class="time-wrapper">
            <span id="currenttime">00:00</span>
            <span id="showtime" >00:00</span>
          </div>
          <div id="barbox" class="graph" style="width:98%">
              <strong id="bar" class="bar" style="width: 0%;"></strong>
          </div>
          <div id="divplayer">
              <audio id="player" src="" loop="0" autostart="true" hidden="true"></audio>
          </div>
        </div>
      </div>
      <div id="lyric"></div>
    </div>
  </div>
</body>
</html>
<script type="text/javascript">
  //获取屏幕宽度
  var htmlWidth = document.documentElement.clientWidth || documnet.body.clientWidth ;
  //更新html font-size
  var htmlDom = document.getElementsByTagName('html')[0];
  htmlDom.style.fontSize = htmlWidth/10 + 'px';
</script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.8.1/aliplayer-min.js"></script>
<script src="index.js"></script>

index.js

var fileseconds = 0;
var progressStateTimer;
var barboxwidth = 0;
var currentbarwidth = 0;
var appendwidth = 0;
var bar;
var currentseconds = 0;
var pausedimg = "pause.png";
var playedimg = "play.png";
var div = document.getElementById('divplayer');  
var player = document.getElementsByTagName('audio')[0];
//发送请求 
function getInfo() {
  var url = window.location.href;
  var queryStr = url.split('?')[1];
  var query = queryStr.split('=');
  var queryKey = query[0];
  var queryValue = query[1];
  console.log(query, queryKey, queryValue, '参数')
  //获取文档内容
  axios.get('http://192.168.3.188:8082/front/test_poetry/?' + queryKey + '=' + queryValue)
    .then(getInfoSucc)
    .catch(getInfoFail)
}
// 获取信息
getInfo();

function getInfoSucc(res) {
  var data = res.data;
  var mp3Reg = /mp3/gi;
  var mp4Reg = /mp4/gi;
  var isMp3 = mp3Reg.test(data.main_media);
  var isMp4 = mp4Reg.test(data.main_media);
  document.getElementById('intro').innerHTML = data.intro;
  document.getElementById('content').innerHTML = data.content;
  if (isMp3) {
    player.src = data.main_media;
    document.getElementById("title").innerHTML = data.title;
    document.getElementById('lyric').innerHTML = data.lyric;
    //监听元数据已加载事件 获取音频总时长 
    player.onloadedmetadata = function getTotalTime() {
      console.log('元数据已加载', player.duration)
      fileseconds = parseInt(player.duration);
      document.getElementById("showtime").innerHTML = (formatTime(fileseconds));
    }
  } else {
    //先根据视频七牛云地址 通过七牛云api生成图片
    //如果是视频就生成视频播放器进行显示 并把音频相关dom隐藏
    // axios.get('http://192.168.3.188:8082/front/img/')
    //      .then(function(res) {
    //         console.log(res.config.url, '封面图片')
    //      })
    aliPlayer(data.main_media);
    document.getElementById('audio-info').style.display = "none";
  }
  console.log(data, '诗歌内容', isMp3, isMp4)
} 
function getInfoFail() {
  console.log('获取内容出错')
}
function play() {
  if (player && player.paused) {
    barboxwidth = document.getElementById("barbox").style.width;
    bar = document.getElementById("bar");
    player.play();
    document.getElementById("icon").src = pausedimg;
    progressStateTimer = setInterval(prossbar, 1000);
  } else if (player && player.played) {
    player.pause();
    document.getElementById("icon").src = playedimg;
    clearInterval(progressStateTimer);
  }
  else {
     //dosomething
  }
}
var prossbar = function () {
    if (fileseconds > 0) {          
        if (currentseconds == 0) {
            appendwidth = 0;
        } else {
          appendwidth = (currentseconds / fileseconds) * 100;
        }
        bar.style.width = appendwidth + "%";
        document.getElementById("currenttime").innerHTML = formatTime(currentseconds);
        currentseconds++;
        if (currentseconds > fileseconds || currentbarwidth >= barboxwidth) {
          player.pause();
          clearInterval(progressStateTimer);
        }
    }
}
function formatTime(second) {
    return [parseInt(second / 60 % 60), parseInt(second % 60)].join(":")
    .replace(/\b(\d)\b/g, "0$1");
}

//创建视频播放器
function aliPlayer(videoUrl) {
  var player = new Aliplayer({
    "id": "player-con",
    "source": videoUrl,
    "width": "100%",
    "height": "179px",
    "autoplay": false,
    "isLive": false,
    "rePlay": false,
    "playsinline": true,
    "preload": false,
    "controlBarVisibility": "always",
    "useH5Prism": true,
    "skinLayout": [
      {
        "name": "H5Loading",
        "align": "cc"
      },
      {
        "name": "errorDisplay",
        "align": "tlabs",
        "x": 0,
        "y": 0
      },
      {
        "name": "infoDisplay"
      },
      {
        "name": "tooltip",
        "align": "blabs",
        "x": 0,
        "y": 56
      },
      {
        "name": "thumbnail"
      },
      {
        "name": "controlBar",
        "align": "blabs",
        "x": 0,
        "y": 0,
        "children": [
          {
            "name": "progress",
            "align": "blabs",
            "x": 0,
            "y": 44
          },
          {
            "name": "playButton",
            "align": "tl",
            "x": 15,
            "y": 12
          },
          {
            "name": "timeDisplay",
            "align": "tl",
            "x": 10,
            "y": 7
          },
          {
            "name": "volume",
            "align": "tr",
            "x": 5,
            "y": 10
          }
        ]
      }
    ]
  }, function (player) {
      player._switchLevel = 0;
      //播放视频
      player.play();
      console.log('创建了播放器')
    }
  );
}

index.css

html, body, div, p, span {
  margin: 0;
  padding: 0;
}
#containner {
	padding: 0.2rem 0.77rem;
  margin: 0 auto;
  font-family: PingFangSC-Regular;
	font-size: 0.37rem;
	color: #1A1A1A;
	letter-spacing: 0;
}
#intro, #content {
  text-align: justify;
}
#video-info {
	margin-top: 0.46rem;
}
.audio-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fcfcfc;
  height: 1.74rem;
  width: 100%;
  border: 1px solid #e0e0e0;
  margin: 0.46rem 0;
}
.audio-left {
  width: 0.8rem; 
  height: 0.8rem;
  line-height: 0.8rem; 
  text-align: center;
  margin: 0 0.73rem 0 0.46rem; 
}
.audio-left img {
	width: 100%;
	height: 100%;
}
.audio-right {
  flex: 1;
  padding-right: 0.2rem;
}
.time-wrapper {
  display: flex;
  justify-content: space-between;
  color: rgb(218,218,218);
  font-family: PingFangSC-Regular;
	font-size: 0.27rem;
	color: #1A1A1A;
	letter-spacing: 0;
}
#barbox {
	margin-top: 0.2rem;
}
.graph {
  position: relative;
  border: 1px solid rgb(218,218,218);
}

.graph .bar {
    display: block;
    position: relative;
    background: #3e87e8;
    text-align: center;
    color: #333;
    height: 5px;
}
#lyric {
  text-align: center;
}

海阔天空.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
记一次h5视频音频使用经验

一个app项目中需要用到一些h5页面，页面中是含音频、视频的。video，audio原生组件ui太丑了，只有自定义了。一开始视频组件在安卓内有些兼容问题，全屏功能无法使用，折腾了一会儿，在网上找到一个第三方播放器Aliplayer，阿里云推出的，第一次使用，感觉很方便，使用简单，能在线配置，根据所选配置会生成代码，直接拿来就用，用起来比较爽！有时候我们需要根据视频帧来生成视频封面图片（就是视...
复制链接

扫一扫

专栏目录