• 兼容浏览器的视频播放


    需要引用个js
    html5media.min.js-------------这个是视频播放插件~

    jquery-1.8.2.min.js---也加个这个把 好写代码--
    好了 不多说了 直接上代码:

     
    <!-- saved from url=(0041)file:///C:/Users/tracy/Desktop/index.html -->
    <html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK"></head><body>
    <script src="jquery-1.8.2.min.js"></script>
    <div id='sp'>
    </div>
     
    <script>
    function loadsp()//加载视频的函数 最下面是调用
    {
    var s='test.mp4';//视频的路径
    showVideo($("#sp"),s,500,400,'mp4');//4个参数分别是 要显示在哪个div 显示的视频路径,显示视频的宽,高,视频的格式
    }
     
     
    function showVideo(o,s,w, h, t){ //t文件格式 
    var _html = ''; 
    if($.inArray(t, ['ogg', 'mp4', 'webm']) >= 0){ //html5 surport 
    var _doc=document.getElementsByTagName('head')[0]; 
    var script=document.createElement('script'); 
    script.setAttribute('type','text/javascript'); 
    script.setAttribute('src','html5media.min.js'); 
    _doc.appendChild(script); 
    script.onload=script.onreadystatechange=function(){ 
    if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){ 
    _html = '<video src="'+s+'" width="'+w+'" height="'+h+'" controls autobuffer >'; 
    _html += '</video>'; 
    $(o).css({"width":w+'px', 'height':h+'px', 'cursor':'default'}); 
    $(o).html(_html); 
    script.onload=script.onreadystatechange=null; 
    }else{ //other like 3gp 
    _html += '<object width="'+w+'" height="'+h+'" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab">'; 
    _html += '<param name="src" value="'+s+'">'; 
    _html += '<param name="controller" value="true">'; 
    _html += '<param name="type" value="video/quicktime">'; 
    _html += '<param name="autoplay" value="false">'; 
    _html += '<param name="target" value="myself">'; 
    _html += '<param name="bgcolor" value="black">'; 
    _html += '<param name="pluginspage" value="http://www.apple.com/quicktime/download/index.html">'; 
    _html += '<embed src="'+s+'" width="'+w+'" height="'+h+'" controller="true" autoplay="false" align="middle" bgcolor="black" target="myself" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/index.html"></embed>'; 
    _html += '</object>'; 
    $(o).css({"width":w+'px', 'height':h+'px', 'cursor':'default'}); 
    $(o).html(_html); 
     
     
    loadsp();//页面加载完成后调用的事件
    </script>
    </body></html>
    QQ:83199235
  • 相关阅读:
    前端接口设计
    前端协作流程
    编写jQuery插件
    jQuery插件之validation插件
    深入理解ajax系列第九篇——jQuery中的ajax
    前端学PHP之Smarty模板引擎
    第3选择-解决所有难题的关键思维,种下好的种子避免落入钻石交易
    阿里BCG重磅报告《人工智能,未来致胜之道》
    关于web开发前端h5框架的选择
    html5+php实现文件的断点续传ajax异步上传
  • 原文地址:https://www.cnblogs.com/softcg/p/6510930.html
Copyright © 2020-2023  润新知