videoJs实现点击按钮播放切换视频
先说一下啊!!博主并不会videoJs,只是使用其实现视频播放功能;不能解决好友的其他需求,请见谅!!!
链接是videoJs实现视频播放需要的js和css:
链接:https://pan.baidu.com/s/1geLvRUz 密码:ujix
下面是亲测demo,一个简单的demo:
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 7 <title>Insert title here</title> 8 <!-- 播放器样式 --> 9 <link href = "css/video-js.css" rel = "stylesheet" type = "text/css"> 10 <!-- 如果要支持IE8 --> 11 <script type="text/javascript" src = "js/videojs-ie8.js"></script> 12 <!-- 播放器js --> 13 <script type="text/javascript" src = "js/video.js"></script> 14 <!-- Jquery插件 --> 15 <script type="text/javascript" src = "js/jquery-2.1.4.js"></script> 16 <script> 17 videojs.options.flash.swf = "/js/video-js.swf"; 18 </script> 19 <script type="text/javascript"> 20 21 function Test(obj) { 22 var val = $(obj).val(); 23 //sourceDom = $("<source src=\""+val+"\">"); 24 $("#video-box video").prop("src",val); 25 //$("#video-box video").append("<source src=\""+val+"\">"); 26 $("#video-box").show(); 27 $("#video-box video").play() 28 29 30 } 31 function test(obj) { 32 var url = $(obj).val(); 33 videojs.options.flash.swf = "__JS_/js/video-js.swf"; 34 var myPlayer = videojs("example_video_1"); 35 myPlayer.src(url); 36 myPlayer.load(url); 37 } 38 </script> 39 </head> 40 <body> 41 42 <div id = "video-box"> 43 <video id="example_video_1" class="video-js vjs-default-skin" controls width="640" height="264" 44 poster="videoJs/hangge-clip.png" 45 data-setup='{ techOrder: ["flash","html5"]}'> 46 <source src = "" type = "video/mp4" id = "videoURL"> 47 </video> 48 </div> 49 <button id = "button" value="hangge.mp4" onclick = "test(this)">第一集</button> 50 <button id = "button" value="111.mp4" onclick = "test(this)">第二集</button> 51 <button id = "button" value="333.ogg" onclick = "test(this)">第三集</button> 52 </body> 53 </html>
Test方法是自己实现给src赋值的方法;
test是videoJsde ;