H5分享页面背景音乐及播放视频

背景音乐部分跟视频播放部分出了点小问题，后来解决了，记录一下。

背景音乐基本需求：在背景右上角定位一个音乐开关，打开H5时自动播放，播放时开关一直旋转，点击关闭音乐，开关不旋转，还有如果播放视频时，音乐自动停止。

视频基本需求：视频宽度需考虑适配，占屏幕宽度的80%，宽高比16：10。

首先写背景音乐开关。

<!-- 背景音乐 -->
<div id="audio_btn" class="rotate">
    <audio src="hello_music.mp3" autoplay="true" loop="loop" id="media" preload="true"></audio>
</div>

css如下，部分屏幕用媒体查询单独调了

/* 音乐图标  */
#audio_btn{
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 200;
  width: 30px;
  height: 30px;
  background-image: url('/img/bgmBtn.svg');
  background-size: contain;
  background-repeat: no-repeat;
}
.rotate {
  -webkit-animation: rotating 1.2s linear infinite;
  -moz-animation: rotating 1.2s linear infinite;
  -o-animation: rotating 1.2s linear infinite;
  animation: rotating 1.2s linear infinite;
}

JS如下，用原生的查找元素，不然play()和pause()给不上去。加一个事件监听，视频播放的时候音乐自动停止。

//音乐开关
var x = document.getElementById("media");
var y = document.getElementById("video");
$("#audio_btn").click(function(){
    $(this).toggleClass("rotate"); //控制音乐图标 自转或暂停
    if($(this).hasClass("rotate")){
        x.play();
        $(this).addClass("rotate");
    }else{
        x.pause();
        $(this).removeClass("rotate");
    }
});

y.addEventListener('play',function(){
    x.pause();
    $("#audio_btn").removeClass("rotate");
});

这里还遇到一个问题，ios系统进入会截流，不会自动播放音乐，在wx.ready里面加了几句，如下：

wx.ready(function(){
    document.getElementById("media").setAttribute('src', 'hello_music.mp3');
    document.getElementById("media").play();
    。。。。。。。。。。
});

到这，背景音乐就OK了。下面写视频。

原先视频是腾讯视频上面的，可以自动生成iframe，把那段贴进来就可以直接用。代码如下:

<iframe frameborder="0" id="video" src="https://v.qq.com/iframe/player.html?vid=y0673ox0uk8&tiny=0&auto=0" allowfullscreen></iframe>

但是后来提需求，需要有个我们自己的封面，我就在想用video的poster属性，下视频也遇到了一个小问题。

腾讯视频是他自己的qlv格式，网上搜了一下，利用缓存可以合成一个mp4格式的。步骤如下：

先用腾讯视频下载这个视频，然后在下载设置中找到缓存地址：

打开vodcache文件夹，把这堆文件都复制一下

我在E盘随便建了个文件夹

然后按住shift+鼠标右键，打开命令窗口，或者从windows键+R 输入cmd 进查找一下当前文件夹也可以。

输入命令 copy/B e*.tdl video.mp4    注意，*前面的是开头字母，如果文件都是a开头就是 a*

然后文件夹里就多了一个mp4文件，试了一下，OK 的。

然后用video标签插入，代码如下

<video id="video" src="video.mp4" controls playsinline poster="video-cover.png"></video>

视频的width是屏幕的80%，宽高比一定，高度用JS写，添加一个监听事件，横竖屏转换的时候视频宽高也要变一下。

//视频高度定义
var onresize = function(e) {
    var $video = $("#video");
    $video.height("height",$("#video").width()*10/16);    
};
window.addEventListener('resize', onresize);
onresize();

到这里就OK了。