分享
  • 收藏
  • 举报
    X
    【已解决】标签本页切换播放地址
    365
    1

    通过标签可以得到 标题和播放地址,怎么在本页面实现播放与切换?给个例子



    {qb:tag name=myvideo" type="cms" mid="14" rows="99"}

    {$rs.title}

    {/qb:tag}


    {qb:tag name=myvideo" type="cms" mid="14" rows="99"}

    {$mv.url}

    {/qb:tag}






    <!------就在这边正在打算发帖问问,这边已经百度出来了一个方案------->




    <html>

    <head>

    <meta charset="utf-8">

    <title>精彩视频播放</title>

    <link rel="stylesheet"  type="text/css"  href="common.css" >

    <style>

    video{

    width: 700px;

    height: 400px;

    }

    #right section{

    clear: both;

    box-sizing: border-box;

    padding-left: 15px;

    }

    #right img{

    float: left;

    width: 150px;

    height: 100px;

    }

    #right div{

    float: left;

    width: 125px;

    padding-left: 10px;

    box-sizing: border-box;

    }

    #right div header{

    font-size: 14px;

    font-weight:bold;

    }

    #right a {

    color: #000;

    }


    </style>

    </head>


    <body>

    <div id="mainContent">

    <div id="left">

    <p id="videotitle">欣赏音乐视频</p>

    <video id="myVideo" controls autoplay >

    <source src="默认播放地址.mp4" type="video/mp4">

    </video> 

    </div>

    <div id="right">


    {qb:tag name=myvideo" type="cms" mid="14" rows="99"}

    <img src="picture/drag2.jpg" alt="">

    <div>

        <header><a href="javascript:void(0)" dir="{$mv.url}">{$rs.title}</a></header>

    </div>

    {/qb:tag}

    </div>


    </div>

    <script src="jquery-1.11.3.min.js"></script>

    <script>

          $(function(){

      var video =document.getElementById("myVideo");

      var source =document.getElementsByTagName("source");

      $("#right a").click(function(){

      var name =$(this).attr("dir");

      var vediotile=$(this).html();

      //修改视频源

      source[0].src=name;

      $("#videotile").html(vediotile);

      //重新加载

      video.load();

      });

      });

    </script>

    </body>

    </html>


    6
    赏礼
    赏钱
    收藏
    点击回复
        全部留言
    • 1
    更多回复
        你可能感兴趣的主题
    恢复多功能编辑器
  • 3 1
  • 推荐内容
    扫一扫访问手机版
    请选择要切换的马甲:

     
    网页即时交流
    QQ咨询
    咨询热线
    020-28998648