ASP.NET專題實務 WebForm + MVC線上教學影片 -- MIS2000Lab.

HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯

• 出版商:碁峰
• 出版日期：2015-04-09
• 台幣定價:
$480
• 售價:7.9 折 $379
• 語言:繁體中文
• ISBN:9863475750
• ISBN-13:9789863475750

<input type="file" id="theTextFile" onchange="onLoadTextFile()" />  
  
<textarea id="theMessageArea" rows="30" cols="40"></textarea>  
  
<script type="text/javascript">  
function onLoadTextFile() {  
var theFile = document.getElementById("theTextFile");  
  
// 確定選取了一個文字檔案，而非其他格式。  
if (theFile.files.length != 0 && theFile.files[0].type.match(/text.*/))   
{  
var reader = new FileReader();  
reader.onload = function(e){  
var MessageArea = document.getElementById("theMessageArea");  
MessageArea.value = e.target.result;  
};  
reader.onerror = function(e){  
alert("例外狀況，無法讀取文字檔");  
};  
  
// 讀取文字檔案，第二個參數預設是UTF-8。  
reader.readAsText(theFile.files[0], "ISO-8859-1");  
}   
else {  
alert("請選取一個文字檔");  
}  
}  
</script>  

// 確定選取了一個二進位檔案，而非其他格式。  
if (theFile.files.length != 0 && theFile.files[0].type.match(/image.*/))   
{  
var reader = new FileReader();  
reader.onload = function(e){  
var theImg = document.getElementById("theImage");  
theImg.src = e.target.result;  
};

<video src="MyVideo.mp4"
width="300" height="200"
poster="MyPoster.jpg" 註：以這張圖片來表示這段影片。

autoplay="autoplay" 註：自動播放。

muted="muted"
controls="controls"
loop="loop" > 註：重複播放。

</video>

<video poster="MyPoster.jpg" autoplay controls>

<source src="MyVideos/MyVideo.mp4" type='video/mp4' />
<source src="MyVideos/MyVideo.webm" type='video/webm' />
<source src="MyVideos/MyVideo.ogv" type='video/ogg' />

<!-- 可以放置flash或silverlight檔案作為備用 -->
<!-- 也可以放一段純文字說明，以免使用者的瀏覽器不支援<vedio>標籤 -->


<a href="MyVideos/MyVideo.webm">
如果不能播放影片，請按此連結</a>

</video>

function createVideoElement(nameOfVideoFile) {  
// 創建一個 video物件並為它設定屬性。  
var newVideo = document.createElement("video");  
  
newVideo.src = nameOfVideoFile;  
newVideo.loop = true;  
newVideo.autoplay = true;  
newVideo.controls = true;  
newVideo.poster = "ImageLoading.png";  
  
// 在現有網頁內，加入video物件。  
var hostElem = document.getElementById("videoDir");  
hostElem.appendChild(newVideo);  
} 

aVideo.addEventListener("loadedmetadata", function() {  
alert("Video duration: " + aVideo.duration);  
}, false);  
  
aVideo.addEventListener("loadeddata", function() {  
aVideo.play();  
}, false);  
  
aVideo.addEventListener("timeupdate", function() {  
alert("Video current time: " + aVideo.currentTime);  
}, false);