【汇智学堂】-js控制H5动画影片的播放

school.html

            <span style="display: block;margin-left: 260px; font-size: 18px; color: #868686;">
                <a id="1" onclick=" return a('1')">为什么需要微服务</a>
            </span>

function a(aa) {
    window.location.href='filmForTeaching.html?'+"aa="+aa;
}

filmForTeaching.html:

<div id="video-box" style="margin-top: 50px;margin-left: 500px;">
    <!-- <img src="/allone-openaccount/resources/images/videoopen.png" id="image_people"/> -->
    <video id="videoid" width="880" height="688" controls="controls" autoplay="autoplay">
        <!-- <source src="/i/movie.ogg" type="video/ogg" /> -->
        <source id="video_path" src="" type="video/mp4" />
        <!--  <source src="/i/movie.webm" type="video/webm" />
         <object data="/i/movie.mp4" width="320" height="240"> -->
<!--        <embed width="320" height="240" src="/i/movie.swf" />-->
        <!--  </object> -->
    </video>
</div>

filmForTeaching.js:

var script=document.createElement("script");
script.type="text/javascript";
script.src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(script);
setTimeout(function(){
    $(document).ready(function(){
        $(function load() {
            var url=location.search;
            var Request = new Object();
            if(url.indexOf("?")!=-1)
            {
                var str = url.substr(1),　//去掉?号
                    aStrs= str.split("&");
                for(var i=0;i<aStrs.length;i++)
                {
                    Request[aStrs[i].split("=")[0]]=decodeURIComponent(aStrs[i].split("=")[1]);
                }
            }
            //alert('姓名：' + Request["aa"]);
            var aa=Request["aa"];
            var videosrc=null;

            switch (aa) {
                case "1":
                    videoSrc = "vedio/为什么需要微服务.mp4";
                    document.getElementById("videoid").src=videoSrc ;
                    document.getElementById("videoid").play();
                    break;
                case "2":
                    videoSrc = "vedio/微服务架构是什么.mp4";//新的视频播放地址
                    document.getElementById("videoid").src=videoSrc ;
                    document.getElementById("videoid").play();
                    break;
                case "3":
                    videoSrc = "vedio/如何构建微服务架构.mp4";//新的视频播放地址
                    document.getElementById("videoid").src=videoSrc ;
                    document.getElementById("videoid").play();
                     // $("#videoid").src=videoSrc ;
                     // $("#videoid").trigger('play');//有待测试
                    break;
                case "4":
                    videoSrc = "vedio/SpingBoot的由来和特点.mp4";//新的视频播放地址
                    document.getElementById("videoid").src=videoSrc ;
                    document.getElementById("videoid").play();
                    break;
                case "5":
                    videoSrc = "vedio/使用IDEA调试Dubbo源码.mp4";//新的视频播放地址
                    document.getElementById("videoid").src=videoSrc ;
                    document.getElementById("videoid").play();
                    break;
                case "6":
                    videoSrc = "vedio/Dubbo实战配置开发环境.mp4";//新的视频播放地址
                    document.getElementById("videoid").src=videoSrc ;
                    document.getElementById("videoid").play();
                    break;
                case "7":
                    videoSrc = "vedio/Jenkins介绍.mp4";//新的视频播放地址
                    document.getElementById("videoid").src=videoSrc ;
                    document.getElementById("videoid").play();
                    break;
                case "8":
                    videoSrc = "vedio/Jenkins介绍.mp4";//新的视频播放地址
                    document.getElementById("videoid").src=videoSrc ;
                    document.getElementById("videoid").play();
                    break;
            }
        });
    });
},100);

• 点赞
• 收藏
• 分享
• • 文章举报

雷玉广 发布了318 篇原创文章 · 获赞 47 · 访问量 3万+ 私信 关注

标签：function,aa,script,动画影片,汇智,H5,html,var,document
来源： https://blog.csdn.net/weixin_39593940/article/details/104173756