码迷,mamicode.com
首页 > Web开发 > 详细

html5-video视频播放

时间:2017-04-16 13:23:57      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:this   current   strong   ref   div   term   html   sed   cli   

技术分享

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

</head>
<body>

<video id="video" width="500" height="500" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.mp4" type="video/ogg">
    您的浏览器不支持 HTML5 video 标签。

</video> </br></br> <button onclick="playPause(this)">播放</button> <button onclick="forward()">快进5秒</button> <button onclick="rewind()">快退5秒</button> <button onclick="mute(this)">静音</button> <button onclick="accelerate()">加速3倍播放</button> <button onclick="decelerate()">减速3倍播放</button> <button onclick="normal()">正常播放</button> <button onclick="upperVolume()">提高声音</button> <button onclick="lowerVolume()">减少声音</button> <script type="text/javascript"> var video = document.getElementById('video'); function playPause(obj) { if (video.paused) { video.play(); obj.innerHTML = "暂停"; } else { video.pause(); obj.innerHTML = "播放"; } } function forward() { video.currentTime += 5; } function rewind() { video.currentTime -= 5; } function mute(obj) { if (video.muted) { video.muted = false; obj.innerHTML = "静音"; } else { video.muted = true; obj.innerHTML = "开声"; } } function accelerate() { video.playbackRate = 3; } function decelerate() { video.playbackRate = 1 / 3; } function normal() { video.playbackRate = 1; } function upperVolume() { video.volume += 0.2; } function lowerVolume() { video.volume -= 0.2; } </script> </body> </html>


Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <video> 元素.

注意: Internet Explorer 8 或者更早的IE版本号不支持 <video> 元素。


html5-video视频播放

标签:this   current   strong   ref   div   term   html   sed   cli   

原文地址:http://www.cnblogs.com/mfmdaoyou/p/6718365.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!