zoukankan      html  css  js  c++  java
  • html5media 视频

    官网: https://html5media.info/

    二.引入script

    <script src="//api.html5media.info/1.1.8/html5media.min.js"></script>
    

    二.HTML

    1.IE的低版本不支持百分比格式 width="100%",height="100%"
    2.使用图片 poster="/images/Course/detail/video_01.jpg"

    <a href="javascript:;" class="video_btn">
        <div class="video_te_sho">
            <video src="http://promotion.chimelong.com/gz_chimelong/happy18.mp4" poster="/images/Course/detail/video_01.jpg" width="645" height="430" controls="controls" preload="auto" id="thevideo"></video>
        </div>
    </a>
    

    三.js

    function detailPage(){
        var video = document.getElementById("thevideo");
    
        // 判断是否支持vdieo事件
        if(video.canPlayType){
            video.controls = false;
            // 解决IE8无法使用百分比
            $("#thevideo").css({"width":"100%", "height":"100%"})
    
            // 播放暂停
            function vidplay(evt){
                if(video.paused){
                    video.play();
                    console.log("暂停");
                }else{
                    video.pause();
                    console.log("播放");
                }
            }
    
            // 点击显示视频
            $(".video_btn").on("click", function(){
                if(video.controls === false){
                    video.controls = true;
                }
                vidplay();
            })
        }
    }
    
  • 相关阅读:
    第三天-基本数据类型 int bool str
    第二天-while循环 格式化输出 运算符 编码
    第一天-python基础
    Mysql
    Mysql
    Mysql
    Mysql
    Mysql
    Mysql
    Php
  • 原文地址:https://www.cnblogs.com/alantao/p/8549057.html
Copyright © 2011-2022 走看看