尚武科技——负责任的企业公民

尚武十年[点击进入]

科技以人为本
尚武旗下网站
尚武科技
搜索图标
Sitemap | Mail | 合作答疑 | 招贤纳士
网站公告 尚武科技服务热线:0311-87882018
   
我们是谁  |  企业文化  |  新闻动态  |  加入我们  |  行业知识
html实现视频播放页面效果2

  现在小视频在我们的生活中使用已经很广泛了,那么其实现效果都有哪些呢,其实现在用html也是可以实现视频播放页面效果的。

  今天,石家庄网站建设工程师给您分享一下关于“html实现视频播放页面效果”的具体实施过程是怎么样的。

石家庄网站建设

  相比上个视频的对比,做出了以下改变:

  1.在上一个视频的基础上加以改进,通过iframe的方法引入,和name值的传参,使iframe的链接改变。

  2.通过data-title的赋值,改变标题的名字

  3.在视频下方加入随机链接,每次刷新的值都会是链接改变

  js代码

  $(function() {

  var iframe = $("div.video_bofang iframe"); //播放页面

  $('ul.video_show_con li a').click(function() {

  iframe.attr("src", $(this).attr("name")); //更改iframe src

  $('ul.video_show_con li a').removeClass('on');

  $(this).addClass('on'); //给点击的元素添加正在播放标识

  });

  });

  /*title切换*/

  function showTitle(title) {

  var TitleType = title.getAttribute("data-title");

  document.getElementById("video_con_title").innerHTML = TitleType;

  }

  /*向上滚动*/

  function AutoScroll(obj) {

  $(obj).find("ul:first").animate({

  marginTop: "-40px"

  },

  800,

  function() {

  $(this).css({

  marginTop: "0px"

  }).find("li:first").appendTo(this);

  });

  }

  $(document).ready(function() {

  setInterval('AutoScroll("#scroll")', 2500)

  });
html代码
<section class="public_width">
    <dl class="video_con">
                <figure class="video_con_show tab">
                    <div class="video_bofang tab-box">
                        <dt class="video_con_title" ><b style="font-size: 30px;">视频标题:</b><span id="video_con_title">你的名字</span></dt>

                       <iframe id="iframe_video" height=512 width=900 src='video/name.mp4' frameborder=0 'allowfullscreen'></iframe>
                        <div class="video_bofang_mtbd">
                           <div id="scroll" class="scroll clearfix">
                              <ul class="mingdan" id="holder">
                                <li>热门:<script type="text/javascript">document.writeln(str1)</script></li>
                                <li>热门:<script type="text/javascript">document.writeln(str1)</script></li>
                                <li>热门:<script type="text/javascript">document.writeln(str1)</script></li>
                              </ul>
                            </div>
                    </div>
                </div> 
                    <figcaption class="video_show_zs">
                        <div class="video_show_zj">
                            <img class="video_show_zj_img" src="images/name.jpg">
                            <p class="video_show_zj_js">
                                <b class="video_show_zj_name">标题</b>
                                <span class="video_show_zj_zc">描述</span>
                            </p>
                        </div>
                        <span class="video_show_title">播放列表</span>
                        <ul class="video_show_con tab-menu">
                             <li class="video_show_list">
                                <a name="video/name.mp4" data-title="你的名字" onclick="showTitle(this)"><img src="images/name.jpg"><span>你的名字<br><em><img src="images/bof.png">1.5万</em></span></a>
                            </li>
                            <li class="video_show_list">
                                <a name="video/name.mp4" data-title="你的名字" onclick="showTitle(this)"><img src="images/name.jpg" ><span>你的名字<br><em><img src="images/bof.png">1.8万</em></span></a>
                            </li>
                            <li class="video_show_list">
                                <a name="video/name.mp4" data-title="你的名字" onclick="showTitle(this)"><img src="images/name.jpg"><span>你的名字<br><em><img src="images/bof.png">2.1万</em></span></a>
                            </li>
                            <li class="video_show_list">
                                <a name="video/txjg.mp4" data-title="天行九歌" onclick="showTitle(this)"><img src="images/txjg.jpg"><span>天行九歌<br><em><img src="images/bof.png">2.0万</em></span></a>
                            </li>
                            <li class="video_show_list">
                                <a name="video/txjg.mp4" data-title="天行九歌" onclick="showTitle(this)"><img src="images/txjg.jpg"><span>天行九歌<br><em><img src="images/bof.png">2.0万</em></span></a>
                            </li>
                            <li class="video_show_list">
                                <a name="video/txjg.mp4" data-title="天行九歌" onclick="showTitle(this)"><img src="images/txjg.jpg"><span>天行九歌<br><em><img src="images/bof.png">2.0万</em></span></a>
                            </li>
                            <li class="video_show_list">
                                <a name="video/txjg.mp4" data-title="天行九歌" onclick="showTitle(this)"><img src="images/txjg.jpg"><span>天行九歌<br><em><img src="images/bof.png">2.0万</em></span></a>
                            </li>
                        </ul>
                    </figcaption>
                </figure>
            </dl>
    </section>

  Demo:https://blog.retechs.cn/demo/video1/

  以上就是今天石家庄网站建设开发人员跟您分享的内容,希望能对大家的网页设计方面能有所帮助。如果您需要做网站,欢迎您来石家庄尚武科技咨询,我们将竭诚问您服务!




上一篇:网站如何设计有高级感             下一篇:关于海报设计的实用技巧

标签:石家庄网站建设
尚武科技
推荐阅读
睿亿网络用心服务的团队,竭诚为您服务 客服不能及时回复您,您可点击QQ进行交谈
欲了解业务详情,请拨打咨询热线:
总部电话:0311-87882018    值班电话:15512183667
在线服务: 尚武科技售前专员   
Copyright © 2008-2019 尚武科技 保留所有权利 >冀ICP备07012169号    Copyright © 2008 www.sw-tech.cn, Inc. All rights reserved