svg点击切换图片播放背景音乐

svg点击切换图片播放背景音乐
1.微信公众后台上传音频

2.通过壹伴插件获取视频播放器iframe标签

3将下列代码iframe视频播放器替换

 <section 
        style="-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow: hidden;text-align: center;line-height: 0;">
        <section 
             style="height: 0;opacity: 0;">
            <section style="overflow: hidden;">
                <section style="transform: scale(10000);">
                    <iframe class="video_iframe wx_video_iframe rich_pages" data-vidtype="2"
                        data-mpvid=""
                        data-cover="http%3A%2F%2Fmmbiz.qpic.cn"
                        allowfullscreen="" frameborder="0" style="position: relative; z-index: 1; border-radius: 4px;"
                        height="434" width="578"
                        src="/cgi-bin/readtemplate?"
                        data-ratio="1.3333333333333333" data-w="960"></iframe>
                </section>
            </section>
        </section><svg
            style="pointer-events:none;overflow:hidden;transform:scale(1);display: block;line-height: 0;margin-top: -1px;"
            viewBox="0 0 900 422" xmlns="http://www.w3.org/2000/svg">
            <g>
                <g>
                    <foreignObject  width="100%" height="100%" x="0" y="0" style="pointer-events:visible;">
                        <svg style="background-image: url(http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960); background-position: 0% 0%; background-repeat: no-repeat; background-size: cover; pointer-events: visible;"
                            version="1.1" viewBox="0 0 900 422" x="0px" y="0px"
                            data-lazy-bgimg="http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960"
                            class="" data-fail="0">
                        </svg>
                    </foreignObject>
                </g>
                 <foreignObject name="gif" width="100%" height="100%" x="0" y="0"
                    transform="translate(50000 0)">
                    <svg style="background-image: url(http://gips3.baidu.com/it/u=3419425165,837936650&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024); background-position: 0% 0%; background-repeat: no-repeat; background-size: cover; pointer-events: none;"
                        version="1.1" viewBox="0 0 900 422" x="0px" y="0px"
                        data-lazy-bgimg="http://gips3.baidu.com/it/u=3419425165,837936650&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024"
                        class="" data-fail="0">
                    </svg>
                </foreignObject>
                <animateTransform attributeName="transform" type="translate" values="0 0;-50000 0;-50000 0" dur="100s"
                    keyTimes="0;0.0000001;1" begin="touchstart" fill="freeze" calcMode="discrete" restart="never">
                </animateTransform>
            </g>
        </svg>
    </section>

4.在公众号后台粘贴代码预览