• 解决video标签的兼容性


    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>播放器</title>
        </head>
        <body >
            <video autoplay="autoplay" controls="controls" width="480px" height="270">
                
               <source src="images/movie.mp4" type="video/mp4" >
                    Your browser does not support the video tag.
                
                <object classid="clasid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="FLVPlayer1" height="270" width="480">
                                <param name="movie" value="images/movie.swf" />
                                <param name="quality" value="high" />
                                <param name="wmode" value="opaque" />
                                <param name="scale" value="noscale" />
                                <param name="salign" value="lt" />
                                <param name="swfversion" value="8,0,0,0" />
                                <!-- 此 param 标签提示使用 Flash Player 6.0 r65 和更高版本的用户下载最新版本的 Flash Player。如果您不想让用户看到该提示,请将其删除。 -->
                                <param name="expressinstall" value="expressInstall.swf" />
                <embed allowfullscreen="true" allowscriptaccess="always" allowNetworking="all" height="270" wmode="Opaque" src="images/movie.swf" type="application/x-shockwave-flash" width="480" name="FLVPlayer1" flashvars="ban_black_white_list=on">
                </embed>
                </object>
                <!--**flash**-->
            </video>
        </div>
    
        </body>
    </html>
    <!--htmlvideo object embed-->
    最近弄的网页嵌套视频播放
    缺点:不能控制视频播放,无控制面板;
    可使用videojs插件:http://www.videojs.com/
    优点:兼容性好
    demo.html:
    <!DOCTYPE html>
    <html>
    <head>
      <title>Video.js | HTML5 Video Player</title>
    
      <!-- Chang URLs to wherever Video.js files will be hosted -->
      <link href="video-js.css" rel="stylesheet" type="text/css">
      <!-- video.js must be in the <head> for older IEs to work. -->
      <script src="video.js"></script>
    
      <!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
      <script>
        videojs.options.flash.swf = "video-js.swf";
      </script>
    
    
    </head>
    <body>
    
      <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
          poster="http://video-js.zencoder.com/oceans-clip.png"
          data-setup="{}">
        <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
        <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
        <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
        <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
        <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
        <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
      </video>
    
    </body>
    </html>
    
    
    
    
     
  • 相关阅读:
    学习路线
    环境搭建时用到的文档
    商城技术重点分析
    svn 忽略文件
    实用的css3 学习笔记
    转载 《AngularJS》5个实例详解Directive(指令)机制
    php 单例设计模式 example
    html5 图片转base64预览显示
    curl返回常见错误码
    jquery的end(),addBack()方法example
  • 原文地址:https://www.cnblogs.com/hanbingljw/p/4607845.html
Copyright © 2020-2023  润新知