zoukankan      html  css  js  c++  java
  • video.js多个视频在同一个页面的调用问题

    最近做项目,有一个需求是做视频列表,点击每一条列表,视频会在右边的播放区域播放,本人使用的是video.js插件,这个插件的API挺全的:http://www.jq22.com/jquery-info404

    解决办法:使用js动态替换视频的src路径

    html:

    <div class="build-videobox">
    <video id="build-video" class="video-js vjs-big-play-centered build-video" controls preload="none" poster="images/activity/lianzheng/lianzheng.jpg"
    data-setup="{}">
    <source src="./videos/lift.mp4" type='video/mp4' class="build-source" />
    </video>
    </div>
    js:
    function createVideo(video) {
    // 视频的地址
    var source = video.source;
    // 每次点击的时候出现播放按钮
    $(".vjs-has-started").css("display", "block");
    $(".vjs-big-play-button").css("display", "block");
    // 初始化video.js
    var myPlayer = videojs('build-video');
    // 暂停的时候出现播放按钮
    myPlayer.on("pause", function () {
    $(".vjs-has-started").css("display", "block");
    $(".vjs-big-play-button").css("display", "block");
    });
    // 视频播放的时候隐藏播放按钮
    myPlayer.on("play", function () {
    $(".vjs-big-play-button").css("display", "none");
    });
    $(".build-source").attr("src", source);
    myPlayer.src(source); //重置video的src
    myPlayer.load(source); //使video重新加载
    myPlayer.play();
    console.log(source);
    }
     
  • 相关阅读:
    笔记44 Hibernate快速入门(一)
    tomcat 启用https协议
    笔记43 Spring Security简介
    笔记43 Spring Web Flow——订购披萨应用详解
    笔记42 Spring Web Flow——Demo(2)
    笔记41 Spring Web Flow——Demo
    Perfect Squares
    Factorial Trailing Zeroes
    Excel Sheet Column Title
    Excel Sheet Column Number
  • 原文地址:https://www.cnblogs.com/klkitty/p/8978728.html
Copyright © 2011-2022 走看看