zoukankan      html  css  js  c++  java
  • HTML5视频的使用总结

    HTML5新增了video视频标签,目前主流浏览器对video支持良好。

    遇到的问题:视频格式不支持或MIME类型不支持

    经实践发现各大主流浏览器都支持mp4格式,但是最好讲MP4设置为H.264 编码格式,这个可以通过格式工厂等视频处理软件实现。

    MIME类型是IIS服务器的属性,打开IIS服务器选择网站目录,双击MIME类型,点击添加,扩展名:.mp4,MIME类型:video/mp4

     <video class='v-video' id='Video' preload='none' poster='/Template/xpshop_currents/Images/lun1111.jpg' src="/Template/xpshop_currents/Images/ckjs.mp4"  controls="controls"></video>

    controls="controls"  视频控制器

    poster='/Template/xpshop_currents/Images/lun1111.jpg'  播放前图片

    preload='none' 不预先加载(省流量、减少服务器负担)

    Video.onpause=function(){
      $('#Vimg1').css('display','block');
    }; 暂停时事件
    Video.onplay=function(){
      $('#Vimg').css('display','none');
      $('#Vimg1').css('display','none');
      $('#P1video').css('display','none');
    }; 播放时事件
    $('#Vimg').click(function(){
      $('#Vimg').css('display','none');
      Video.play(); //开始播放
    })

    //播放进度初始化

    Video.currentTime=0;

     如何兼容IE8?

      引入html5media.min.js

      引入地址:  <script src="http://api.html5media.info/1.1.8/html5media.min.js"></script>  

      github:https://github.com/etianen/html5media/wiki

  • 相关阅读:
    springmvc的文件上传和JWT图形验证码
    POJ 2932 Coneology计算最外层圆个数
    POJ1127 Jack Straws
    求逆序对
    P3809 【模板】后缀排序
    匈牙利算法
    POJ2976 Dropping tests
    字符串哈希
    zkw费用流
    最大流Dinic算法
  • 原文地址:https://www.cnblogs.com/webwangjie/p/7403037.html
Copyright © 2011-2022 走看看