html5播放mp4视频代码

简介:

1.nginx支持flv和mp4格式播放

默认yum安装nginx

centos7安装nginx时候应该是默认安装nginx_mod_h264_streaming模块的

# nginx -V查看是否安装nginx_mod_h264_streaming模块

nginx在新版本中已经支持了--with-http_mp4_module --with-http_flv_module这2个模块即可

# vi /etc/nginx/nginx.conf

server {

        listen       80 default_server;

        listen       [::]:80 default_server;

        server_name  _;

        root         /usr/share/nginx/html;

        #guowang add

        limit_rate_after 5m;   #在flv视频文件下载了5M以后开始限速

        limit_rate 512k;      #速度限制为512K


        # Load configuration files for the default server block.

        include /etc/nginx/default.d/*.conf;


        location / {

        }


        #guowang add

        location ~ \.flv {

            flv;

        }

        location ~ \.mp4$ {

            mp4;

        }


        error_page 404 /404.html;

            location = /40x.html {

        }


        error_page 500 502 503 504 /50x.html;

            location = /50x.html {

        }

}


2.html5播放mp4视频代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>公司宣传片</title>

</head>

<body>

    <h2>公司宣传片</h2>

    <video width="320" height="240" controls autoplay>

        <source src="gs.mp4" type="video/mp4">

        <source src="gs.ogg" type="video/ogg">

        <source src="gs.webm" type="video/webm">

        <object data="gs.mp4" width="320" height="240">

          <embed src="gs.swf" width="320" height="240"><p>如果你播放不了该视频,

那是你的设备不支持该文件格式</p>

        </object>

    </video>

</body>

</html>



本文转自 guowang327 51CTO博客,原文链接:http://blog.51cto.com/guowang327/1855027,如需转载请自行联系原作者

相关文章
精美按钮式广告代码HTML分享
精美按钮式广告代码HTML分享
399 4
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
996 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
921 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
html实现的文字发散动画效果代码
html实现的文字发散动画效果代码
263 30
|
移动开发 前端开发 HTML5
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画代码
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画特效代码,很有意思,一团三角形碎片跟随鼠标的移动,不冗长、不笨重,反而有一种很轻盈的感觉,非常不错
296 29
|
存储 移动开发 JavaScript
网页 HTML 自动播放下一首音乐
在 HTML5 中实现自动播放下一首音乐,通过管理音乐列表、操作音频元素和监听事件完成。创建包含多个音乐链接的列表,使用 `&lt;audio&gt;` 元素加载音乐,监听 `ended` 事件,在当前音乐结束时自动播放下一首。示例代码展示了如何使用 JavaScript 实现这一功能,确保无缝切换音乐。
|
Java BI API
spring boot 整合 itextpdf 导出 PDF,写入大文本,写入HTML代码,分析当下导出PDF的几个工具
这篇文章介绍了如何在Spring Boot项目中整合iTextPDF库来导出PDF文件,包括写入大文本和HTML代码,并分析了几种常用的Java PDF导出工具。
4869 0
spring boot 整合 itextpdf 导出 PDF,写入大文本,写入HTML代码,分析当下导出PDF的几个工具
|
移动开发 JavaScript 前端开发
HTML5 Video(视频)2
HTML5 `&lt;video&gt;` 标签及其相关属性和方法简介:支持 MP4、WebM 和 Ogg 视频格式。通过 JavaScript 控制播放、暂停、加载及设置属性如音量、尺寸等。示例展示了如何使用 `play()`、`pause()` 方法及 `paused`、`width` 属性创建基本的播放/暂停和调整尺寸控件。
|
Web App开发 移动开发 iOS开发
HTML5 Video(视频)1
HTML5引入了&lt;video&gt;元素,为网页视频播放提供标准方法。它支持播放、暂停和音量控制,以及视频尺寸设置。主要浏览器如IE9+、Firefox、Opera、Chrome和Safari均支持此元素。&lt;video&gt;元素可通过多个&lt;source&gt;子元素链接不同格式的视频文件,以确保兼容性。当前支持的视频格式包括MP4、WebM和Ogg。
html实现的破碎拼接文字动画特效代码
html实现的破碎拼接文字动画特效代码是一段会自动产生文字依次破碎再拼接的效果,非常的炫。欢迎对此段代码感兴趣的朋友前来下载使用。
252 1

热门文章

最新文章