<!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. Java编程开发之数据图表分析模型

    数据统计分析 多曲线图表分析实现 基本需求分析 假设在怪兽出没的年岁,加上年关在即,需要统计分析各个道路卡口车流量出入统计,主要从车流量和车牌地角度出发.如图所示的业务需求: 道路卡口-车流量分析: ...

  2. SpringMVC-02 第一个SpringMVC程序

    SpringMVC-02 第一个SpringMVC程序 第一个SpringMVC程序 配置版 新建一个Moudle , springmvc-02-hello,确定依赖导入进去了 1.配置web.xml ...

  3. 翻译：《实用的Python编程》04_01_Class

    目录 | 上一节 (3.6 设计讨论) | 下一节 (4.2 继承) 4.1 类 本节介绍 class 语句以及创建新对象的方式. 面向对象编程(OOP) 面向对象编程是一种将代码组织成对象集合的编程 ...

  4. [UWP] 模仿哔哩哔哩的一键三连

    1. 一键三连 什么是一键三连? 哔哩哔哩弹幕网中用户可以通过长按点赞键同时完成点赞.投币.收藏对UP主表示支持,后UP主多用"一键三连"向视频浏览者请求对其作品同时进行点赞.投币 ...

  5. FreeBSD 日常应用

    freebsd日常应用 办公libreoffice或者apache openoffice 设计 图像编辑:gimp 矢量图设计:lnkscape 视频剪辑:openshot 视频特效:natron 编 ...

  6. TextRank算法及生产文本摘要方法介绍

    TextRank 算法是一种用于文本的基于图的排序算法,其基本思想来源于谷歌的 PageRank算法,通过把文本分割成若干组成单元(句子),构建节点连接图,用句子之间的相似度作为边的权重,通过循环迭代 ...

  7. 基金 A 类和 C 类、ETF、LOF、QDII 到底是啥?

    ETF 对于初入股市的新手来说,买了一只公司股票容易,想买一个行业的股票就不是很容易了. 比如你要懂得行业里都有谁,每个公司分配多少钱,最主要股票交易最少要交易 1 手也就是 100 股,要是想配置一 ...

  8. python3 虚拟环境 venv

    创建一个虚拟环境: python -m venv test            (test 为创建的虚拟环境目录) 激活虚拟环境: test\Scripts\activate            ...

  9. 手把手教你如何使用Charles抓包

    一.为什么使用charles 前几天因为需要通过抓包定位问题,打开了尘封已久的fiddler,结果打开软件后什么也干不了,别说手机抓包了,打开软件什么请求也抓不到. 很多时候都是如此,如果一个方案不行 ...

  10. 微信小程序 | app.json配置属性

    app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. widows: 用于设置小程序的状态栏.导航条.标题.窗口背景色. navig ...