<!DOCTYPE html>

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta http-equiv="expires" content="0">

<title>video播放视频以及相关事件</title>

<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css" />

<style type="text/css">

.playVideo{

    margin: 100px;

}

</style>

</head>

<body>

<div class="playVideo">

    <video class="news_video" src="fayuan.mp4" controls=""></video>

</div>

<script type="text/javascript" src="jquery/jquery.min.js"></script>

<script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>

<script type="text/javascript">

$(function(){  

    playVideo();  

    /*视频播放状态*/

    $('.news_video').bind('play', function () {

        alert("正在播放视频");

    });  

    /*视频结束或错误*/

    $('.news_video').bind('error ended', function(){

        alert("播放视频结束");

    })  

    /*视频暂停*/

    $('.news_video').bind('pause', function () {

        alert("暂停");

    });  

　　video.controls=true;//显示进度条
}) //播放视频  function playVideo(){ var video = $(".news_video"); if(video.length>0){ video[0].play(); } } </script> </body> </html>

video播放视频以及相关事件的更多相关文章

  1. HTML5 - 使用<video>播放视频

    ,下面是一个播放视频的最简单样例 (controls属性告诉浏览器要有基本播放控件) <video src="hangge.mp4" controls></vid ...

  2. 微信浏览器video播放视频踩坑

    video属性介绍 iOS的属性 playsinline On iPhone, video playsinline elements will now be allowed to play inlin ...

  3. HTML5 video 播放视频黑屏

    <video width="320" height="240" controls>        <source src="movi ...

  4. H5 video播放视频遇到的问题

    我在别的网站上下载了一个mp4格式的视频,加到video标签里可以正常播放, 然后我用FLV自己转成mp4,却提示不支持的格式和mine类型, 后来找到一篇文章 http://jingyan.baid ...

  5. 如何使用微信小程序video组件播放视频

    相信很多人都有在手机上看视频的习惯,比较看视频更真实更形象.那么我们在微信小程序中如何观看视频呢?这就需要video组件的帮忙了.今天我们就给大家演示一下,如何用微信小程序组件video播放视频.我们 ...

  6. 关于大视频video播放的问题以及解决方案（m3u8的播放）

    在HTML5里,提供了<video>标签,可以直接播放视频,video的使用很简单: <video width="320" height="240&qu ...

  7. 手机浏览器自动播放视频video（设置autoplay无效）的解决方案

    1.问题的提出 某一天接了个需求,需要在手机的H5页面内加入视频,我开开心心做完,准备交付的时候,问题来了,PM想要用户一进入页面,视频就开始播放,不需要用户手动点击. 2.尝试解决 加autopla ...

  8. video元素和audio元素相关事件

    前言 在利用video元素或audio元素读取或播放媒体数据时,会触发一系列事件,如果用js脚本来捕抓这些事件,就可以对着这些事件进行处理了. 捕抓的方式有两种: 第一种是监听的方式.使用vedio或 ...

  9. 解决html5 video不能播放 能播放声音不能播放视频

    <video id="playVideo" style="width:90%; height:auto;" controls poster=". ...

随机推荐

  1. 后端程序员之路 30、webapi测试工具的一点想法

    有了webapi,对应的,也就要有各种语言的sdk,有时候,还要有一个好用的api测试工具.sdk和api测试工具在功能上有一些异同,有时候测试工具会直接基于sdk来制作. 它们通常包含: 1.htt ...

  2. CF1491C Pekora and Trampoline 题解

    题目链接 ​ 比赛时只想到了 \(\mathcal O(n^3)\) 的暴力做法,官方题解是 \(\mathcal O(n^2)\) ,并且是可以优化为 \(\mathcal O(n)\) 的(贪心+ ...

  3. 02.从0实现一个JVM语言之词法分析器-Lexer-03月02日更新

    从0实现JVM语言之词法分析器-Lexer 本次有较大幅度更新, 老读者如果对前面的一些bug, 错误有疑问可以复盘或者留言. 源码github仓库, 如果这个系列文章对你有帮助, 希望获得你的一个s ...

  4. C#连接Excel读取与写入数据库SQL （ 下 ）

    接上期 dataset简而言之可以理解为 虚拟的 数据库或是Excel文件.而dataset里的datatable 可以理解为数据库中的table活着Excel里的sheet(Excel里面不是可以新 ...

  5. Java 查找算法

    1 查找算法介绍 在 java 中,我们常用的查找有四种: 1) 顺序(线性)查找 2) 二分查找/折半查找 3) 插值查找 4) 斐波那契查找   2 线性查找算法 有一个数列: {1,8, 10, ...

  6. 简述Python垃圾回收机制和常量池的验证

    目录 通过代码验证python解释器内部使用了常量池 Python的引入 变量的引入 为什么要有变量 定义变量 常量引入 常量池引入 Python解释器 Python变量存储机制 Python垃圾回收 ...

  7. shell脚本，mysql数据库的备份-2[mysqldump]

    # 数据库IPIP=127.0.0.1# 数据库端口PORT=3306# 数据库用户USER=root# 数据库密码PASSWORD=****# 要备份的数据库TARGET_DB=database_n ...

  8. Spring 的 IOC

    1. 什么是IOC IOC的好处 IOC的思想是将需要的对象通过外部传入进来,而不是自己创建.这样的设计方式更加灵活.在Spring中对象之间的依赖关系也是由IOC容器来维护(类与类之间的依赖关系,使 ...

  9. Apache配置 2.用户认证

    1.用户认证用来对某些目录中的网页进行访问控制,当用户访问这些页面的时候需要输入用户名和密码进行认证. 2. 配置: # vim /usr/local/apache2.4/conf/extra/htt ...

  10. uniCloud的简单使用 增删改查

    新建一个uni-app 项目 启动云开发 选择想要的云服务 在次之前先完成uniCloud 的实名认证 https://unicloud.dcloud.net.cn 有在Web控制台创建过云服务空间就 ...