zoukankan      html  css  js  c++  java
  • MediaElement.js对不同浏览器的支持

    目前已经有很多html5播放器可以使用,使用html5播放器可以轻松的在页面中插入媒体视频,从而使我们的web页面变得更加丰富多彩,所以今天向大家推荐一款非常优秀的html5播放器MediaElement.js,它不仅能够添加我们常用的html5视频格式(mp4,m4v,mov), 而且还支持回退方式,即一些低版本的浏览器不支持HTML5播放可以采取flash的方式进行播放,从而达到支持绝大部分的浏览器

    亲测IE8下能使用HTML5的video标签,以及支持对hls流媒体的播放,webm视频格式文件暂不支持(在nodejs下完美运行,iis下问题:hls流媒体文件找不到,可能是设置有部分问题,暂时未找到解决方法,如果有大神请指教),现在来看一下小栗子:

    首先下载mediaelement.js文件以及jquery.js文件

    地址:https://github.com/johndyer/mediaelement

    下载完后在文件夹build中找到flashmediaelement.swfmediaelement-and-player.min.jsmediaelementplayer.css文件

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>video</title>

    //  引用样式文件

    <link rel="stylesheet" type="text/css" href="mediaelement-master/mediaelementplayer.css">
    </head>
    <body>

    //  引用jquery.js文件
    <script type="text/javascript" src="jquery-1.12.2.js"></script>

    //  引用mediaelement-and-player.min.js文件
    <script type="text/javascript" src="mediaelement-master/mediaelement-and-player.min.js"></script>

    <video width="320" height="240" controls="controls" preload="none">
      <!-- <source type="video/mp4" src="video/mp4.mp4" /> -->
      <!-- <source type="video/webm" src="video/webm.webm" /> -->
      <source src="m3u8/index.m3u8" type="application/x-mpegurl">
    </video>

    <script>

    //  添加需要支持的媒体音频格式
    $('video,webm,m3u8').mediaelementplayer();
    </script>

    </body>
    </html>

  • 相关阅读:
    生日蛋糕 (搜索)
    C语言中将二维数组作为函数参数来传递
    HDU 1052 Tian Ji -- The Horse Racing (贪心)(转载有修改)
    HDU 1789 Doing Homework again(排序,DP)
    10.6 ip:网络配置工具
    10.7 netstat:查看网络状态
    10.19 dig:域名查询工具
    10.21 nmap:网络探测工具和安全/端口扫描器
    10.20 host:域名查询工具
    LeetCode Add Two Numbers 两个数相加
  • 原文地址:https://www.cnblogs.com/chendongbky/p/5320582.html
Copyright © 2011-2022 走看看