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了。
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页